native聊天界面 react_ReactNative 聊天 App 实战|RN 仿微信界面群聊|朋友圈
前言
这次要给大家分享的是基于ReactNative开发的聊天APP实战项目RN_ChatRomm,运用react-native+react-navigation+react-redux+react-native-image-picker+rnPop 等技术进行框架搭建开发,开发期间采坑了不少,不过 ReactNative 社区比较完善,很多问题都在网上找到了解决方案。
技术实现
RN脚手架:react-native + react-native-cli
状态管理:react-redux + redux
页面导航器:react-navigation
RN模态框组件:rnPop.js
打包工具:webpack 2.0
滑动组件:react-native-swiper
图片选取:react-native-image-picker
{
"name": "RN_ChatRoom",
"aboutMe": "QQ:282310962、wx:xy190310",
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/runtime": "^7.5.5",
"@react-native-community/async-storage": "^1.6.1",
"@react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.8.0",
"eslint": "^6.1.0",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.55.0",
"react-native-gesture-handler": "^1.3.0",
"react-native-image-picker": "^1.0.2",
"react-native-swiper": "^1.5.14",
"react-navigation": "^3.11.1",
"react-redux": "^7.1.0",
"react-test-renderer": "16.8.6",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
}
}
RN创建公共样式style
新建style.js公共样式库,通过RN 中提供的global全局变量,在app.js中一次引入,然后所有页面均可以调用。
global.GStyle = {
pixel: 1 / PixelRatio.get(),
// 边框
borT: {borderTopWidth: 1 / PixelRatio.get(), borderTopColor: '#dedede',},
borB: {borderBottomWidth: 1 / PixelRatio.get(), borderBottomColor: '#dedede',},
/* __ 布局控制 */
align_l: {textAlign: 'left'},
align_c: {textAlign: 'center'},
align_r: {textAlign: 'right'},
pos_rel: {position: 'relative'},
pos_abs: {position: 'absolute'},
/* __ 颜色(背景、文字) */
bg_fff: {backgroundColor: '#fff'},
bg_45cff5: {backgroundColor: '#45cff5'},
c_fff: {color: '#fff'},
c_999: {color: '#999'},
c_45cff5: {color: '#45cff5'},
/* __ 字号 */
fs_14: {fontSize: 14},
fs_16: {fontSize: 16},
fs_20: {fontSize: 20},
fs_24: {fontSize: 24},
/* __ 字体 */
ff_ic: {fontFamily: 'iconfont'},
ff_ar: {fontFamily: 'arial'},
iconfont: {fontFamily: 'iconfont', fontSize: 16,},
/* __ 间距( 5/10/15/20/25/30/50 ) */
mt_10: {marginTop: 10}, mt_15: {marginTop: 15}, mt_20: {marginTop: 20},
mb_10: {marginBottom: 10}, mb_15: {marginBottom: 15}, mb_20: {marginBottom: 20},
/* __ 行高 */
lh_20: {lineHeight: 20},
lh_25: {lineHeight: 25},
lh_30: {lineHeight: 30},
lh_35: {lineHeight: 35},
lh_40: {lineHeight: 40},
flex1: {flex: 1},
flex2: {flex: 2},
flex_alignC: {alignItems: 'center'},
flex_alignT: {alignItems: 'flex-start'},
flex_alignB: {alignItems: 'flex-end'},
}
RN制作全屏APP启动页
reactNative如何实现沉浸式效果,只需把 StatusBar 设置为透明,这样状态栏和背景页面一体了。
export default class Splash extends Component{
constructor(props){
super(props)
this.state = {
animFadeOut: new Animated.Value(1),
}
}
render(){
return (
RN-ChatRoom v1.0.0
)
}
componentDidMount(){
storage.get('hasLogin', (err, object) => {
setTimeout(() => {
Animated.timing(
this.state.animFadeOut, {duration: 300, toValue: 0}
).start(()=>{
this.props.navigation.navigate('Index')
})
}, 1500);
})
}
}
RN自定义顶部条headerBar
export default class HeaderBar extends Component {
constructor(props){
super(props)
this.state = {
searchInput: ''
}
}
render() {
/**
* 更新
* @param { navigation | 页面导航 }
* @param { title | 标题 }
* @param { center | 标题是否居中 }
* @param { search | 是否显示搜索 }
* @param { headerRight | 右侧 Icon 按钮 }
*/
let{ navigation, title, bg, center, search, headerRight } = this.props
return (
{/* 返回 */}
{/* 标题 */}
{ !search && center ? : null }
{
search ?
(
{this.setState({searchInput: text})}} style={styles.barSearchText} placeholder='搜索' placeholderTextColor='rgba(255,255,255,.6)' />
)
:
(
{ title ? {title} : null }
)
}
{/* 右侧 */}
{
!headerRight ? null : headerRight.map((item, index) => {
return(
item.press ? item.press(this.state.searchInput) : null}>
{
item.type === 'iconfont' ? item.title : (
typeof item.title === 'string' ?
{`${item.title}`}
:
)
}
{/* 圆点 */}
{ item.badge ? {item.badge} : null }
{ item.badgeDot ? : null }
)
})
}
)
}
goBack = () => {
this.props.navigation.goBack()
}
}
RN自定义Modal弹窗组件(仿微信/ios效果)
项目中用到的弹窗是自己基于Modal开发的自定义弹窗组件|dialog对话框|toast提示,支持多种调用方式,具体的可以去看看这篇文章介绍 https://www.cnblogs.com/xiaoyan2017/p/1129...
static defaultProps = {
isVisible: false, //弹窗显示
title: '', //标题
content: '', //内容
style: null, //自定义弹窗样式 {object}
contentStyle: null, //内容样式
skin: '', //自定义弹窗风格
icon: '', //自定义弹窗图标
shade: true, //遮罩层
shadeClose: true, //点击遮罩层关闭
opacity: '', //遮罩层透明度
time: 0, //弹窗自动关闭秒数
xtime: false, //显示关闭秒数
end: null, //销毁弹窗时回调函数
anim: 'scaleIn', //弹窗动画( scaleIn / fadeIn / top / bottom / left / right )
follow: null, //跟随定位(适用于在长按位置定位弹窗)
position: '', //弹窗位置
btns: null, //弹窗按钮(不设置则不显示按钮)[{...options}, {...options}]
}
RN聊天表情处理
方法一: 通过特殊符处理,[哭泣] (:88 类似这样的,处理起来比较麻烦,而且图片多了会影响页面性能。
方法二: 使用 emoj 表情符,这种方式处理比较简单,网上很多表情符可用,而且不需要特殊处理,性能也还不错。如果要求不高,推荐这种方式。
好了,今天的分享就到这里,希望能给到你们些许帮助~~~
本作品采用《CC 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
native聊天界面 react_ReactNative 聊天 App 实战|RN 仿微信界面群聊|朋友圈相关推荐
- 高仿微信发起群聊添加联系人界面
微信中发起群聊页面,每点击一个item(联系人),左上角就会添加上相应的联系人,再次点击就会取消选中,点击上面已选中的联系人也会取消选中,而且上面的联系人展示中会慢慢挤压右边的搜索框,直到右边有一定的 ...
- Android 仿微信添加群聊界面——addView
仿微信添加群聊界面--addView 转载于:https://www.cnblogs.com/zhujiabin/p/5916746.html
- vue2.0聊天室vue-chatRoom|仿微信界面vue+vuex+vueRouter
Vue2.0+Vuex+VueRouter仿微信界面聊天室|仿微信聊天窗口|仿微信群聊 基于vue2.0+vuex+webpack2.0+es6+wcPop等技术开发的仿微信聊天室vue-weChat ...
- imchat视频聊天室 linux,基于Nuxt+Vant聊天模板|nuxt.js仿微信界面|红包|朋友圈
项目说明 > [NuxtIMChat项目]是基于vue.js+nuxt.js+vuex+webpack+vant-ui开发的仿微信聊天实例.实现了消息发送.图片/视频预览.下拉刷新/长按弹窗.朋 ...
- h5移动端聊天室|仿微信界面聊天室|h5多人聊天室
今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是 ...
- QT_QML_仿微信界面(实战)
QT_QML_仿微信界面(实战) 效果如下: 代码获取地址: 链接:https://pan.baidu.com/s/1wmDqpe94HnY_OPjSou5xBg 提取码:xmkt
- 常用点击复制唤醒微信app、跳转微信界面
唤醒微信app.跳转微信界面 可以微信号,二维码刷新轮播 不懂的,教程看此处:https://blog.csdn.net/LYH4988/article/details/104770482 <! ...
- 是男人就下100层【第一层】——高仿微信界面(7)
在上一篇<是男人就下100层[第一层]--高仿微信界面(6)>中我们已经对主界面的的各个菜单进行了简单实现,接下来我们完成两个比较有趣的功能,一个是上部的下弹式菜单,另一个是摇一摇功能. ...
- WPF仿微信界面发送消息简易版
WPF仿微信界面发送消息简易版 参考别的博主的例子用WPF MVVM框架来仿了一个微信聊天界面,做了个发送消息简易功能,下面一起来看看吧! 以下为View视图布局代码,消息对话框的样式直接在这里定义了 ...
最新文章
- 面向对象的5个基本设计原则
- 通过实例理解 Go 逃逸分析
- 翻新版三星Note7发售消息曝光:原价7折,6月发售
- 计算机应用昨早领域,计算机应用-第1章.ppt
- PHP简易网页访问统计源码
- 华为手机_text是什么文件_华为学习文档资料
- python能做什么项目-这十个Python实战项目,让你瞬间读懂Python!
- arduino霍尔编码器蓝牙小车代码
- centos7zabbix-agen安装
- java读取word pdf文件内容_JAVA读取WORD,EXCEL,POWERPOINT,PDF文件的方法
- 魔兽地图编辑器插件YDWE的使用与基本设置
- Logic Pro X for Mac(音乐制作软件)
- JVM-调优《常见可视化工具与命令行的使用》
- Bugku_Misc_Licking dog diary
- python控制微信屏蔽_Python之微信消息防撤回
- android edittext 动画,如何在Android中的TextView或EditText中添加动画表情符号
- 急速扩张的银隆曝出欠款,董明珠的梦想与现实
- 量子计算机有多可怕 一秒破译全世界所有密码!
- Elasticsearch(搜索引擎解决方案)
- 过年期间啃完这7套Java面试题,年后面试阿里P7稳了,赶快放到收藏夹吃灰!
热门文章
- 剑指offer刷题总记——Java
- 一款性能足够的4.5寸以下的手机
- 【vue,SpringBoot,Mybatis】 关于多条件搜索表单
- java读书雷_Java多态学习笔记
- 2022年NOC软件创意编程(学而思赛道)选拔赛小学高年级组python,包含答案
- 用计算机开3次方,android系统计算器开3次方
- c语言基础题(笔记一)
- Linux基础知识与实操-篇三: 文件压缩打包与vim基本使用
- nvme固态硬盘开机慢_解决nvme固态开机慢
- python中pd series_Python 数据处理(三)——pd.Series