原生反应仿微信聊天室实例代码

一、前言

9月，又到开学的季节。为每个一直默默努力的自己点赞！最近都沉浸在自然反应原生应用开发中，之前也有使用vue/反应/角度等技术开发过聊天室项目，另外还使用氡技术做了个自定义模态弹窗rnPop组件。

一、项目简述

基于反应反应-自然反应-导航react-redux react-native-swiper RNPoP等技术开发的仿微信原生应用界面聊天室——RN _聊天室，实现了原生应用启动页、异步存储本地存储登录拦截、集成rnPop模态框功能（仿微信弹出窗口弹窗菜单)、消息触摸列表、发送消息、表情（动图),图片预览，拍摄图片、发红包、仿微信朋友圈等功能。

二、技术点

视图模型框架：反应/反应-原生/反应-原生-命令行界面状态管理：react-redux/redux页面导航：反应-导航皇家海军弹窗组件：rnPop打包工具：webpack 2.0轮播组件：react-native-swiper图片/相册：反应-原生-图像拾取器

{ 'name': 'RN_ChatRoom '，' version': '0.0.1 '，' aboutMe': 'QQ:282310962、wx:xy190310 '，' dependencies ' : { ' react ' : ' 16。8 .6 '，' react-native': '0.60.4' }，' dev dependencies ' 3360 { ' @ babel/core ' 3:

App全屏幕启动页溅泼的量模板

反应原生如何全屏启动？设置定制状态栏顶部条背景为透明半透明={true}，并配合氡动画愉快的

/** * @desc启动页面*/导入反应，{组件}从反应导入{状态栏、动画、视图、文本、图像}从“反应-原生”导出默认类溅泼的量扩展组件{构造器(道具){ super(道具)这个。state={ animfadenin :新动画版.值(0),动画输出：新动画。值(1)，} } render(){ return(动画视图样式={[GStyle.flex1DC_a_j，{backgroundColor: '#1a4065 '，opa city 3360 this。国家。aniffadeout }]}状态栏背景颜色='透明'栏样式='轻-内容'透明={ true }/View样式={ gstyle。flex 1 _ a _ j }图像源={ require('./assets/img/ic_default.jpg')}样式={ { borderRadius: 100，宽度： 100，高度： 100 } }//视图样式={[GStyle.align_c，{paddingVertical: 20}]}文本样式={{color: '#dbdbdb '，fontSize: 12，textAlign: ' center '，}}RN-ChatRoom v1 .View ) } componentDidMount(){ //判断是否登录storage.get('hasLogin '，(err，object)={ setTimeout(()={ animated。定时(这个。国家。animFadeout，{duration: 300，tovalue : 0 0).start(()={ //跳转页面乌提尔。导航重置(这。道具。导航，(！犯罪对象object.hasLogin)？Index' : 'Login') }) }，1500)；})}RN本地存储技术异步存储

/** * @desc本地存储函数*/从" @反应-本地-社区/异步-存储"导入异步存储导出默认类存储{静态获取(键，回调){返回异步存储。getitem(key)，(err，object)={ callback(err，JSON。parse(object))})}静态集(键、数据、回调){返回异步存储。移除项目(键)}静态清除(){异步存储。clear()} }全局存储=全局.声明全局全球的变量，只需在App.js页面一次引入、多个页面均可调用。

storage.set('hasLogin '，{ hasLogin : true })存储。get('已登录'，(err，object)={ 0.}) App主页面模板及全局引入组件

从“反应”导入反应，{片段，组件}从“反应-原生”//导入{ StatusBar }引入公共jsimport ./src/utils/util“导入”./src/utils/storage/导入样式"进口"。/src/assets/CSS/common/导入rnPop弹窗"进口"。/src/assets/js/RNPoP/RNPoP。js '//引入页面路由从""导入页面外部/src/路由器类应用程序扩展组件{ render(){ return(Fragment){/*状态栏background COlOr={ gstyle }。headerbackgroundcolor } bar style=' light-content '/*/} {/*页面*/}外页/{/*弹窗模板*/} RNPop//(片段)} }导出默认App反应-导航页面导航器/地址路由、底部标签栏

由于反应导航官方顶部导航器不能满足需求，如是自己封装了一个，功能效果有些类似微信导航。

导出默认类横梁扩展组件{构造器(道具){ super(道具)这个。state={搜索输入3360 ' ' } } render(){/* * *更新* @param { navigation |页面导航} * @param { title |标题} * @param { center |标题是否居中} * @param { search |是否显示搜索} * @param { headerRight |右侧图标按钮} */让{导航、标题、bg、居中、搜索右标题}=这个。道具返回(查看样式={ gstyle。flex _ col }状态栏背景色={ BG？BG : gstyle。headerbackgroundcolor } bar style=' light-content '半透明={ true }/视图样式={[样式。rnim _ _ topBar，GStyle.flex_row，{backgroundColor: bg？BG : gstyle。headerbackgroundcolor }]} {/*返回*/}可触摸不透明度样式={[样式。图标后退]}活动不透明度={。5 }按下={这。goback }文本样式={[gstyle。图标font,gstyle.c_fff,gstyle.fs_18]}/text/touchableopacity {/*标题*/} { !搜索中心？视图样式={ Gstyle。flex 1 }/: null } {搜索？（视图样式={[style。酒吧搜索，GStyle.flex1，GStyle。flex _ row]} TextInput OnChangeText={ text={ this。setstate({搜索输入3360文本})} }样式style={ style . bar search text }占位符='搜索placeholderTextColor='rgba(255，255，255，6)'//视图):(视图样式={[样式。巴特它，GStyle.flex1，GStyle.flex_row，中央？风格。bartitcenter : null]} { title？文本样式={[style。barcell，{fontSize: 16，左填充： 0 }]} { title }/Text : null }/View)} {/*右侧*/}视图样式={[style。BarBtn，GStyle.flex_row]} {！头对头？null : headerRight.map((项，索引)={ return(可触摸不透明度样式={[样式。图标项目]}活动不透明度={。5 }键={ index } onPress={()=item。媒体？项目。按(这个。国家。搜索输入): null { item }。type==='图标字体'？项目。标题：(项目。title===' string '？文本样式={item.style？项目。style : null } { ` $ { item。title } `}/Text :图像源={ item。title } style={ { width : 24，height: 24，resize mode : ' contain ' } }/)} {/*圆点*/} { item.badge？视图样式={[style。图标徽章，gstyle。徽章]}文本样式={ gstyle。徽章_文本} {项目。徽章}/文本/视图：空} {项目。巴德盖多？视图样式={[样式。我叫iconbadgedot，gstyle。badge _ dot]}/View : null }/可触摸不透明度)})}/View/View/View)} goBack=()={ this。道具。导航。goBack()} }

//创建底部TabBarconst tabNavigator=createBottomTabNavigator(//tabbar路由（消息、通讯录、我){ Index: { screen: Index，导航选项3360({ navigation })=({ tabbar label : '消息，tabbaricon :({聚焦，色调})=(查看文本样式={[gstyle。图标字体，GStyle.fs_20，{color:(聚焦？]}/Text视图样式={[GStyle.badge，{position: 'absolute '，top: -2，right: -15，} }文本样式={ gstyle。badge _ text } 12/text/view/view)})})，联系人： {屏幕：联系人，导航选项3360 { tabbbarlabel : '通讯录，tabbaricon :({聚焦，色调})=(查看文本样式={[gstyle。图标字体，GStyle.fs_20，{color:(聚焦？浅色： ' # 999 ')} ]}/text/视图)} } }，ucet re : { screen : u center，导航选项3360 { tabbarlabel : '我，tabbaricon :({聚焦，色调})=(查看文本样式={[gstyle。图标字体，GStyle.fs_20，{color:(聚焦？]}/Text视图样式={[GStyle.badge_dot，{position: 'absolute '，top: -2，right: -6，}]}/view/view)} } } }，//tabbar配置{ .}) RN聊天页面功能模块

1、表情处理：原本是想着使用图片表情gif，可是在氡里面文本输入文本框不能插入图片，只能通过定义一些特殊字符：66: (:12 [奋斗]解析表情，处理起来有些麻烦，而且图片多了影响性能，如是就改用emoj表情符。

facelist :[{ nodes 3360[''，''，''，''，''，''，' '，' ' ','','','','','','','del' '','','','','','',''，] }，{ node s 3360[''，''，''，''，''，''，''，''，''，''，''，''，''，''，' '，' ' ','','','','','','','del'，] }，]2、光标定位：在指定光标处插入内容，文本输入提供了光标起始位置

让选择=这个。文本输入。_ last nativeselection | | null这个。文本输入。setnativerpops({ selection : { start : XXX，end : xxx}})3、textInput判断内容是否为空，过滤空格、回车

isEmpty=(html)={返回html。替换(/\ r \ n | \ n | \ r/，' ').替换(/(?^[ \t\n\r] )|(？[\ t \ n \ r]$)/g ' ')==' ' }

/** * 聊天模块JS - *///.滚动至聊天底部scroltoBottom=(t)={ 0让那个=这个这个_ timer=setTimeout(()={ that。参考文献。滚动视图。滚动到({动画： false })}，t？16 : 0);}//.隐藏键盘隐藏键盘=()={键盘。misse()}//点击表情handlepresemotion=(img)={ if(img==' del ')return let selection=this。编辑输入。_ lasnativeselection | | nullif(！精选){这个。setstate({ editorText : this。国家。editorText ` $ { img } `，lastlrange : this。国家。编辑文本。length })else {让startStr=this。国家。编辑文本。substr(0，这个。国家。lastlrange？这个。国家。最后范围：选择。开始)让endStr=这个。国家。编辑文字。substr(这个。国家。最后一个范围？这个。国家。最后范围：选择。结束)这个。setstate({ editor text : start str ` $ { img } ` end str，lastRange: (startStr `${img} `)).长度}) } }//发送消息isEmpty=(html)={返回html。替换(/\ r \ n | \ n | \ r/，' ').替换(/(?^[ \t\n\r] )|(？[ \t\n\r] $)/g ' '，)=''}handleSubmit=()={ //判断是否为空值如果(这个。我是空的。国家。editortext))返回let _ msg=这个。国家。_ _ messageJson let _ len=_ msg。长度/消息队列let _data={ id: `msg${ _len} `，msgtype: 3，isme: true，avator: require('./././assets/img/uimg/u _ _ chat _ img 11。jpg ')，作者： '王梅(Fine)'，msg: this.state.editorText，imgsrc: ' '，videosrc : ' ' } _ msg=_ msg。concat(_ data)这个。setstate({ _ _ messagejs : _ msg，editor text : ' ' })对此。scroltobottom(true)}/【选择区功能模块】 - //选择图片handleLaunchImage=()={ let那=此imagepicker。launch imagelibrary({//title : '请选择图片来源，//取消按钮标题： '取消，//takePhotoButtonTitle: '拍照，//choosefrolibrarybuttontitle : '相册图片，//custom button 3360[//{ name : ' Baidu '，title: 'baidu.com图片}，//]，//cameraType: 'back '，//mediaType: 'photo '，//videoQuality: 'high '，//maxWidth: 300，//maxHeight: 300，//quality:8，//noData: true，storage options 3360 { skipbackup : true，}，}，(response)={//console。日志(响应)if(响应。DidCancel){控制台。日志('用户已取消')} else if(响应。错误){控制台。日志('图像拾取器错误'))else { let source={ uri 3360响应。uri }//let source={ uri : ' data : image/JPEG；base64，回应。数据}那。setstate({ imgsrc : source })表示。scroltobottom(true)} })总结

以上所述是小编给大家介绍的自然反应仿微信聊天室实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！