经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » HTML5 » 查看文章
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
来源：cnblogs　　作者：xiaoyan2017　　时间：2019/9/2 9:25:59　　对本文有异议

一、前言

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

一、项目简述

基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室——RN_ChatRoom，实现了原生app启动页、AsyncStorage本地存储登录拦截、集成rnPop模态框功能(仿微信popupWindow弹窗菜单)、消息触摸列表、发送消息、表情(动图)，图片预览，拍摄图片、发红包、仿微信朋友圈等功能。

二、技术点

  • MVVM框架：react / react-native / react-native-cli
  • 状态管理：react-redux / redux
  • 页面导航：react-navigation
  • rn弹窗组件：rnPop
  • 打包工具：webpack 2.0
  • 轮播组件：react-native-swiper
  • 图片/相册：react-native-image-picker
  1. {
  2.   "name": "RN_ChatRoom",
  3.   "version": "0.0.1",
  4.   "aboutMe": "QQ：282310962 、 wx：xy190310",
  5.   "dependencies": {
  6.     "react": "16.8.6",
  7.     "react-native": "0.60.4"
  8.   },
  9.   "devDependencies": {
  10.     "@babel/core": "^7.5.5",
  11.     "@babel/runtime": "^7.5.5",
  12.     "@react-native-community/async-storage": "^1.6.1",
  13.     "@react-native-community/eslint-config": "^0.0.5",
  14.     "babel-jest": "^24.8.0",
  15.     "eslint": "^6.1.0",
  16.     "jest": "^24.8.0",
  17.     "metro-react-native-babel-preset": "^0.55.0",
  18.     "react-native-gesture-handler": "^1.3.0",
  19.     "react-native-image-picker": "^1.0.2",
  20.     "react-native-swiper": "^1.5.14",
  21.     "react-navigation": "^3.11.1",
  22.     "react-redux": "^7.1.0",
  23.     "react-test-renderer": "16.8.6",
  24.     "redux": "^4.0.4",
  25.     "redux-thunk": "^2.3.0"
  26.   },
  27.   "jest": {
  28.     "preset": "react-native"
  29.   }
  30. }

◆ App全屏幕启动页splash模板

react-native如何全屏启动？ 设置StatusBar顶部条背景为透明 translucent={true}，并配合RN动画Animated

  1. /**
  2.  * @desc 启动页面
  3.  */
  5. import React, { Component } from 'react'
  6. import { StatusBar, Animated, View, Text, Image } from 'react-native'
  8. export default class Splash extends Component{
  9.     constructor(props){
  10.         super(props)
  11.         this.state = {
  12.             animFadeIn: new Animated.Value(0),
  13.             animFadeOut: new Animated.Value(1),
  14.         }
  15.     }
  17.     render(){
  18.         return (
  19.             <Animated.View style={[GStyle.flex1DC_a_j, {backgroundColor: '#1a4065', opacity: this.state.animFadeOut}]}>
  20.                 <StatusBar backgroundColor='transparent' barStyle='light-content' translucent={true} />
  21.  
  22.                 <View style={GStyle.flex1_a_j}>
  23.                     <Image source={require('../assets/img/ic_default.jpg')} style={{borderRadius: 100, width: 100, height: 100}} />
  24.                 </View>
  25.                 <View style={[GStyle.align_c, {paddingVertical: 20}]}>
  26.                     <Text style={{color: '#dbdbdb', fontSize: 12, textAlign: 'center',}}>RN-ChatRoom v1.0.0</Text>
  27.                 </View>
  28.             </Animated.View>
  29.         )
  30.     }
  32.     componentDidMount(){
  33.         // 判断是否登录
  34.         storage.get('hasLogin', (err, object) => {
  35.             setTimeout(() => {
  36.                 Animated.timing(
  37.                     this.state.animFadeOut, {duration: 300, toValue: 0}
  38.                 ).start(()=>{
  39.                     // 跳转页面
  40.                     util.navigationReset(this.props.navigation, (!err && object && object.hasLogin) ? 'Index' : 'Login')
  41.                 })
  42.             }, 1500);
  43.         })
  44.     }
  45. }

◆ RN本地存储技术async-storage

  1. /**
  2.  * @desc 本地存储函数
  3.  */
  5. import AsyncStorage from '@react-native-community/async-storage'
  7. export default class Storage{
  8.     static get(key, callback){
  9.         return AsyncStorage.getItem(key, (err, object) => {
  10.             callback(err, JSON.parse(object))
  11.         })
  12.     }
  14.     static set(key, data, callback){
  15.         return AsyncStorage.setItem(key, JSON.stringify(data), callback)
  16.     }
  18.     static del(key){
  19.         return AsyncStorage.removeItem(key)
  20.     }
  22.     static clear(){
  23.         AsyncStorage.clear()
  24.     }
  25. }
  27. global.storage = Storage

声明全局global变量，只需在App.js页面一次引入、多个页面均可调用。

storage.set('hasLogin', { hasLogin: true })
storage.get('hasLogin', (err, object) => { ... })

◆ App主页面模板及全局引入组件

  1. import React, { Fragment, Component } from 'react'
  2. import { StatusBar } from 'react-native'
  3.  
  4. // 引入公共js
  5. import './src/utils/util'
  6. import './src/utils/storage'
  7.  
  8. // 导入样式
  9. import './src/assets/css/common'
  10. // 导入rnPop弹窗
  11. import './src/assets/js/rnPop/rnPop.js'
  12.  
  13. // 引入页面路由
  14. import PageRouter from './src/router'
  16. class App extends Component{
  17.   render(){
  18.     return (
  19.       <Fragment>
  20.         {/* <StatusBar backgroundColor={GStyle.headerBackgroundColor} barStyle='light-content' /> */}
  22.         {/* 页面 */}
  23.         <PageRouter />
  25.         {/* 弹窗模板 */}
  26.         <RNPop />
  27.       </Fragment>
  28.     )
  29.   }
  30. }
  32. export default App

◆ react-navigation页面导航器/地址路由、底部tabbar

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

  1. export default class HeaderBar extends Component {
  2.     constructor(props){
  3.         super(props)
  4.         this.state = {
  5.             searchInput: ''
  6.         }
  7.     }
  9.     render() {
  10.         /**
  11.          * 更新
  12.          * @param { navigation | 页面导航 }
  13.          * @param { title | 标题 }
  14.          * @param { center | 标题是否居中 }
  15.          * @param { search | 是否显示搜索 }
  16.          * @param { headerRight | 右侧Icon按钮 }
  17.          */
  18.         let{ navigation, title, bg, center, search, headerRight } = this.props
  20.         return (
  21.             <View style={GStyle.flex_col}>
  22.                 <StatusBar backgroundColor={bg ? bg : GStyle.headerBackgroundColor} barStyle='light-content' translucent={true} />
  23.                 <View style={[styles.rnim__topBar, GStyle.flex_row, {backgroundColor: bg ? bg : GStyle.headerBackgroundColor}]}>
  24.                     {/* 返回 */}
  25.                     <TouchableOpacity style={[styles.iconBack]} activeOpacity={.5} onPress={this.goBack}><Text style={[GStyle.iconfont, GStyle.c_fff, GStyle.fs_18]}>&#xe63f;</Text></TouchableOpacity>
  26.                     {/* 标题 */}
  27.                     { !search && center ? <View style={GStyle.flex1} /> : null }
  28.                     {
  29.                         search ? 
  30.                         (
  31.                             <View style={[styles.barSearch, GStyle.flex1, GStyle.flex_row]}>
  32.                                 <TextInput onChangeText={text=>{this.setState({searchInput: text})}} style={styles.barSearchText} placeholder='搜索' placeholderTextColor='rgba(255,255,255,.6)' />
  33.                             </View>
  34.                         )
  35.                         :
  36.                         (
  37.                             <View style={[styles.barTit, GStyle.flex1, GStyle.flex_row, center ? styles.barTitCenter : null]}>
  38.                                 { title ? <Text style={[styles.barCell, {fontSize: 16, paddingLeft: 0}]}>{title}</Text> : null }
  39.                             </View>
  40.                         )
  41.                     }
  42.                     {/* 右侧 */}
  43.                     <View style={[styles.barBtn, GStyle.flex_row]}>
  44.                         { 
  45.                             !headerRight ? null : headerRight.map((item, index) => {
  46.                                 return(
  47.                                     <TouchableOpacity style={[styles.iconItem]} activeOpacity={.5} key={index} onPress={()=>item.press ? item.press(this.state.searchInput) : null}>
  48.                                         {
  49.                                             item.type === 'iconfont' ? item.title : (
  50.                                                 typeof item.title === 'string' ? 
  51.                                                 <Text style={item.style ? item.style : null}>{`${item.title}`}</Text>
  52.                                                 :
  53.                                                 <Image source={item.title} style={{width: 24, height: 24, resizeMode: 'contain'}} />
  54.                                             )
  55.                                         }
  56.                                         {/* 圆点 */}
  57.                                         { item.badge ? <View style={[styles.iconBadge, GStyle.badge]}><Text style={GStyle.badge_text}>{item.badge}</Text></View> : null }
  58.                                         { item.badgeDot ? <View style={[styles.iconBadgeDot, GStyle.badge_dot]}></View> : null }
  59.                                     </TouchableOpacity>
  60.                                 )
  61.                             })
  62.                         }
  63.                     </View>
  64.                 </View>
  65.             </View>
  66.         )
  67.     }
  69.     goBack = () => {
  70.         this.props.navigation.goBack()
  71.     }
  72. }
  1. // 创建底部TabBar
  2. const tabNavigator = createBottomTabNavigator(
  3.     // tabbar路由（消息、通讯录、我）
  4.     {
  5.         Index: {
  6.             screen: Index,
  7.             navigationOptions: ({navigation}) => ({
  8.                 tabBarLabel: '消息',
  9.                 tabBarIcon: ({focused, tintColor}) => (
  10.                     <View>
  11.                         <Text style={[ GStyle.iconfont, GStyle.fs_20, {color: (focused ? tintColor : '#999')} ]}>&#xe642;</Text>
  12.                         <View style={[GStyle.badge, {position: 'absolute', top: -2, right: -15,}]}><Text style={GStyle.badge_text}>12</Text></View>
  13.                     </View>
  14.                 )
  15.             })
  16.         },
  17.         Contact: {
  18.             screen: Contact,
  19.             navigationOptions: {
  20.                 tabBarLabel: '通讯录',
  21.                 tabBarIcon: ({focused, tintColor}) => (
  22.                     <View>
  23.                         <Text style={[ GStyle.iconfont, GStyle.fs_20, {color: (focused ? tintColor : '#999')} ]}>&#xe640;</Text>
  24.                     </View>
  25.                 )
  26.             }
  27.         },
  28.         Ucenter: {
  29.             screen: Ucenter,
  30.             navigationOptions: {
  31.                 tabBarLabel: '我',
  32.                 tabBarIcon: ({focused, tintColor}) => (
  33.                     <View>
  34.                         <Text style={[ GStyle.iconfont, GStyle.fs_20, {color: (focused ? tintColor : '#999')} ]}>&#xe61e;</Text>
  35.                         <View style={[GStyle.badge_dot, {position: 'absolute', top: -2, right: -6,}]}></View>
  36.                     </View>
  37.                 )
  38.             }
  39.         }
  40.     },
  41.     // tabbar配置
  42.     {
  43.         ...
  44.     }
  45. )

◆ RN聊天页面功能模块

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

 

  1. faceList: [
  2.     {
  3.         nodes: [
  4.             '??','??','??','??','??','??','??',
  5.             '??','??','??','??','??','??','??',
  6.             '??','??','??','??','??','??','del',
  7.         ]
  8.     },
  9.     ...
  10.     {
  11.         nodes: [
  12.             '??','??','??','??','??','??','??',
  13.             '??','??','??','??','??','????','????',
  14.             '????','????','??‍??','????‍??','????‍??','????‍??','del',
  15.         ]
  16.     },
  17.     ...
  18. ]

2、光标定位：在指定光标处插入内容，textInput提供了光标起始位置

let selection = this.textInput._lastNativeSelection || null;
this.textInput.setNativeProps({
　　selection : { start : xxx, end : xxx}
})

3、textInput判断内容是否为空，过滤空格、回车

isEmpty = (html) => {
　　return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == ""
}

  1. /**
  2.  * 聊天模块JS----------------------------------------------------
  3.  */
  4. // ...滚动至聊天底部
  5. scrollToBottom = (t) => {
  6.     let that = this
  7.     this._timer = setTimeout(() => {
  8.         that.refs.scrollView.scrollToEnd({animated: false})
  9.     }, t ? 16 : 0);
  10. }
  12. // ...隐藏键盘
  13. hideKeyboard = () => {
  14.     Keyboard && Keyboard.dismiss()
  15. }
  17. // 点击表情
  18. handlePressEmotion = (img) => {
  19.     if(img === 'del') return
  21.     let selection = this.editorInput._lastNativeSelection || null;
  22.     if (!selection){
  23.         this.setState({
  24.             editorText : this.state.editorText + `${img}`,
  25.             lastRange: this.state.editorText.length
  26.         })
  27.     }
  28.     else {
  29.         let startStr = this.state.editorText.substr(0 , this.state.lastRange ? this.state.lastRange : selection.start)
  30.         let endStr = this.state.editorText.substr(this.state.lastRange ? this.state.lastRange : selection.end)
  31.         this.setState({
  32.             editorText : startStr + `${img}` + endStr,
  33.             lastRange: (startStr + `${img}`).length
  34.         })
  35.     } 
  36. }
  38. // 发送消息
  39. isEmpty = (html) => {
  40.     return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == ""
  41. }
  42. handleSubmit = () => {
  43.     // 判断是否为空值
  44.     if(this.isEmpty(this.state.editorText)) return
  46.     let _msg = this.state.__messageJson
  47.     let _len = _msg.length
  48.     // 消息队列
  49.     let _data = {
  50.         id: `msg${++_len}`,
  51.         msgtype: 3,
  52.         isme: true,
  53.         avator: require('../../../assets/img/uimg/u__chat_img11.jpg'),
  54.         author: '王梅（Fine）',
  55.         msg: this.state.editorText,
  56.         imgsrc: '',
  57.         videosrc: ''
  58.     }
  59.     _msg = _msg.concat(_data)
  60.     this.setState({ __messageJson: _msg, editorText: '' })
  62.     this.scrollToBottom(true)
  63. }
  66. // >>> 【选择区功能模块】------------------------------------------
  67. // 选择图片
  68. handleLaunchImage = () => {
  69.     let that = this
  71.     ImagePicker.launchImageLibrary({
  72.         // title: '请选择图片来源',
  73.         // cancelButtonTitle: '取消',
  74.         // takePhotoButtonTitle: '拍照',
  75.         // chooseFromLibraryButtonTitle: '相册图片',
  76.         // customButtons: [
  77.         //     {name: 'baidu', title: 'baidu.com图片'},
  78.         // ],
  79.         // cameraType: 'back',
  80.         // mediaType: 'photo',
  81.         // videoQuality: 'high',
  82.         // maxWidth: 300,
  83.         // maxHeight: 300,
  84.         // quality: .8,
  85.         // noData: true,
  86.         storageOptions: {
  87.             skipBackup: true,
  88.         },
  89.     }, (response) => {
  90.         // console.log(response)
  91.  
  92.         if(response.didCancel){
  93.             console.log('user cancelled')
  94.         }else if(response.error){
  95.             console.log('ImagePicker Error')
  96.         }else{
  97.             let source = { uri: response.uri }
  98.             // let source = {uri: 'data:image/jpeg;base64,' + response.data}
  99.             that.setState({ imgsrc: source })
  101.             that.scrollToBottom(true)
  102.         }
  103.     })
  104. }

◆ 附上vue/react/angular聊天室IM实例

Vue网页版聊天室：https://www.cnblogs.com/xiaoyan2017/p/10793728.html

React版聊天室：https://www.cnblogs.com/xiaoyan2017/p/11106246.html

Angular聊天室：https://www.cnblogs.com/xiaoyan2017/p/11194828.html

 

原文链接：http://www.cnblogs.com/xiaoyan2017/p/11441285.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML5热门文章

  • Webpack友好的错误提示插件friendly-errors-webpack-plugin
  • uni-app 微信小程序 picker 三级联动
  • 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
  • H5+ 操作手机日历
  • uni-app开发经验分享十五： uni-app 蓝牙打印功能
  • 设计中的设计PDF下载高清完整扫描原版
  • 前端canvas动画如何转成mp4视频的方法
  • antd通过 filterDropdown 自定义--按某天时间搜索
  • H5+ API 设置手机状态栏颜色以及沉浸式状态栏
  • elementui中el-input联想搜索框

    • HTML5推荐文章

  • canvas实现动态替换人物的背景颜色
  • form 表单恢复初始数据
  • canvas?中如何实现物体的框选
  • 前端canvas中物体边框和控制点的实现示例
  • FileReader()读取文件、图片上传预览
  • 跨域访问方法介绍(5)--使用 window.postMessage 传递数据
  • 跨域访问方法介绍(3)--使用片段识别符传值
  • 跨域访问方法介绍(4)--使用 window.name 传值
  • HTML
  • 前端常用模板引擎- artTemplate

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号