react native 仿微信聊天室实例代码


Posted in Javascript onSeptember 17, 2019

一、前言

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
{
 "name": "RN_ChatRoom",
 "version": "0.0.1",
 "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"
 },
 "jest": {
  "preset": "react-native"
 }
}

react native 仿微信聊天室实例代码

react native 仿微信聊天室实例代码

react native 仿微信聊天室实例代码

react native 仿微信聊天室实例代码

react native 仿微信聊天室实例代码

react native 仿微信聊天室实例代码

react native 仿微信聊天室实例代码

react native 仿微信聊天室实例代码

react native 仿微信聊天室实例代码

react native 仿微信聊天室实例代码

react native 仿微信聊天室实例代码

react native 仿微信聊天室实例代码

react native 仿微信聊天室实例代码

react native 仿微信聊天室实例代码

react native 仿微信聊天室实例代码

◆ App全屏幕启动页splash模板

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

/**
 * @desc 启动页面
 */

import React, { Component } from 'react'
import { StatusBar, Animated, View, Text, Image } from 'react-native'

export default class Splash extends Component{
  constructor(props){
    super(props)
    this.state = {
      animFadeIn: new Animated.Value(0),
      animFadeOut: new Animated.Value(1),
    }
  }

  render(){
    return (
      <Animated.View style={[GStyle.flex1DC_a_j, {backgroundColor: '#1a4065', opacity: this.state.animFadeOut}]}>
        <StatusBar backgroundColor='transparent' barStyle='light-content' translucent={true} />

        <View style={GStyle.flex1_a_j}>
          <Image source={require('../assets/img/ic_default.jpg')} style={{borderRadius: 100, width: 100, height: 100}} />
        </View>
        <View style={[GStyle.align_c, {paddingVertical: 20}]}>
          <Text style={{color: '#dbdbdb', fontSize: 12, textAlign: 'center',}}>RN-ChatRoom v1.0.0</Text>
        </View>
      </Animated.View>
    )
  }

  componentDidMount(){
    // 判断是否登录
    storage.get('hasLogin', (err, object) => {
      setTimeout(() => {
        Animated.timing(
          this.state.animFadeOut, {duration: 300, toValue: 0}
        ).start(()=>{
          // 跳转页面
          util.navigationReset(this.props.navigation, (!err && object && object.hasLogin) ? 'Index' : 'Login')
        })
      }, 1500);
    })
  }
}

◆ RN本地存储技术async-storage

/**
 * @desc 本地存储函数
 */
import AsyncStorage from '@react-native-community/async-storage'
export default class Storage{
  static get(key, callback){
    return AsyncStorage.getItem(key, (err, object) => {
      callback(err, JSON.parse(object))
    })
  }
  static set(key, data, callback){
    return AsyncStorage.setItem(key, JSON.stringify(data), callback)
  }
  static del(key){
    return AsyncStorage.removeItem(key)
  }
  static clear(){
    AsyncStorage.clear()
  }
}
global.storage = Storage

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

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

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

import React, { Fragment, Component } from 'react'
import { StatusBar } from 'react-native'
// 引入公共js
import './src/utils/util'
import './src/utils/storage'
// 导入样式
import './src/assets/css/common'
// 导入rnPop弹窗
import './src/assets/js/rnPop/rnPop.js'
// 引入页面路由
import PageRouter from './src/router'
class App extends Component{
 render(){
  return (
   <Fragment>
    {/* <StatusBar backgroundColor={GStyle.headerBackgroundColor} barStyle='light-content' /> */}
    {/* 页面 */}
    <PageRouter />
    {/* 弹窗模板 */}
    <RNPop />
   </Fragment>
  )
 }
}

export default App

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

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

react native 仿微信聊天室实例代码

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 (
      <View style={GStyle.flex_col}>
        <StatusBar backgroundColor={bg ? bg : GStyle.headerBackgroundColor} barStyle='light-content' translucent={true} />
        <View style={[styles.rnim__topBar, GStyle.flex_row, {backgroundColor: bg ? bg : GStyle.headerBackgroundColor}]}>
          {/* 返回 */}
          <TouchableOpacity style={[styles.iconBack]} activeOpacity={.5} onPress={this.goBack}><Text style={[GStyle.iconfont, GStyle.c_fff, GStyle.fs_18]}></Text></TouchableOpacity>
          {/* 标题 */}
          { !search && center ? <View style={GStyle.flex1} /> : null }
          {
            search ? 
            (
              <View style={[styles.barSearch, GStyle.flex1, GStyle.flex_row]}>
                <TextInput onChangeText={text=>{this.setState({searchInput: text})}} style={styles.barSearchText} placeholder='搜索' placeholderTextColor='rgba(255,255,255,.6)' />
              </View>
            )
            :
            (
              <View style={[styles.barTit, GStyle.flex1, GStyle.flex_row, center ? styles.barTitCenter : null]}>
                { title ? <Text style={[styles.barCell, {fontSize: 16, paddingLeft: 0}]}>{title}</Text> : null }
              </View>
            )
          }
          {/* 右侧 */}
          <View style={[styles.barBtn, GStyle.flex_row]}>
            { 
              !headerRight ? null : headerRight.map((item, index) => {
                return(
                  <TouchableOpacity style={[styles.iconItem]} activeOpacity={.5} key={index} onPress={()=>item.press ? item.press(this.state.searchInput) : null}>
                    {
                      item.type === 'iconfont' ? item.title : (
                        typeof item.title === 'string' ? 
                        <Text style={item.style ? item.style : null}>{`${item.title}`}</Text>
                        :
                        <Image source={item.title} style={{width: 24, height: 24, resizeMode: 'contain'}} />
                      )
                    }
                    {/* 圆点 */}
                    { item.badge ? <View style={[styles.iconBadge, GStyle.badge]}><Text style={GStyle.badge_text}>{item.badge}</Text></View> : null }
                    { item.badgeDot ? <View style={[styles.iconBadgeDot, GStyle.badge_dot]}></View> : null }
                  </TouchableOpacity>
                )
              })
            }
          </View>
        </View>
      </View>
    )
  }
  goBack = () => {
    this.props.navigation.goBack()
  }
}
// 创建底部TabBar
const tabNavigator = createBottomTabNavigator(
  // tabbar路由(消息、通讯录、我)
  {
    Index: {
      screen: Index,
      navigationOptions: ({navigation}) => ({
        tabBarLabel: '消息',
        tabBarIcon: ({focused, tintColor}) => (
          <View>
            <Text style={[ GStyle.iconfont, GStyle.fs_20, {color: (focused ? tintColor : '#999')} ]}></Text>
            <View style={[GStyle.badge, {position: 'absolute', top: -2, right: -15,}]}><Text style={GStyle.badge_text}>12</Text></View>
          </View>
        )
      })
    },
    Contact: {
      screen: Contact,
      navigationOptions: {
        tabBarLabel: '通讯录',
        tabBarIcon: ({focused, tintColor}) => (
          <View>
            <Text style={[ GStyle.iconfont, GStyle.fs_20, {color: (focused ? tintColor : '#999')} ]}></Text>
          </View>
        )
      }
    },
    Ucenter: {
      screen: Ucenter,
      navigationOptions: {
        tabBarLabel: '我',
        tabBarIcon: ({focused, tintColor}) => (
          <View>
            <Text style={[ GStyle.iconfont, GStyle.fs_20, {color: (focused ? tintColor : '#999')} ]}></Text>
            <View style={[GStyle.badge_dot, {position: 'absolute', top: -2, right: -6,}]}></View>
          </View>
        )
      }
    }
  },
  // tabbar配置
  {
    ...
  }
)

◆ RN聊天页面功能模块

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

react native 仿微信聊天室实例代码react native 仿微信聊天室实例代码

faceList: [
  {
    nodes: [
      '?','?','?','?','?','?','?',
      '?','?','?','?','?','?','?',
      '?','?','?','?','?','?','del',
    ]
  },
  ...
  {
    nodes: [
      '?','?','?','?','?','?','?',
      '?','?','?','?','?','??','??',
      '??','??','?‍?','??‍?','??‍?','??‍✈️','del',
    ]
  },
  ...
]

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, "") == ""
}
/**
 * 聊天模块JS----------------------------------------------------
 */
// ...滚动至聊天底部
scrollToBottom = (t) => {
  let that = this
  this._timer = setTimeout(() => {
    that.refs.scrollView.scrollToEnd({animated: false})
  }, t ? 16 : 0);
}
// ...隐藏键盘
hideKeyboard = () => {
  Keyboard && Keyboard.dismiss()
}
// 点击表情
handlePressEmotion = (img) => {
  if(img === 'del') return
  let selection = this.editorInput._lastNativeSelection || null;
  if (!selection){
    this.setState({
      editorText : this.state.editorText + `${img}`,
      lastRange: this.state.editorText.length
    })
  }
  else {
    let startStr = this.state.editorText.substr(0 , this.state.lastRange ? this.state.lastRange : selection.start)
    let endStr = this.state.editorText.substr(this.state.lastRange ? this.state.lastRange : selection.end)
    this.setState({
      editorText : startStr + `${img}` + endStr,
      lastRange: (startStr + `${img}`).length
    })
  } 
}
// 发送消息
isEmpty = (html) => {
  return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == ""
}
handleSubmit = () => {
  // 判断是否为空值
  if(this.isEmpty(this.state.editorText)) return
  let _msg = this.state.__messageJson
  let _len = _msg.length
  // 消息队列
  let _data = {
    id: `msg${++_len}`,
    msgtype: 3,
    isme: true,
    avator: require('../../../assets/img/uimg/u__chat_img11.jpg'),
    author: '王梅(Fine)',
    msg: this.state.editorText,
    imgsrc: '',
    videosrc: ''
  }
  _msg = _msg.concat(_data)
  this.setState({ __messageJson: _msg, editorText: '' })
  this.scrollToBottom(true)
}

// >>> 【选择区功能模块】------------------------------------------
// 选择图片
handleLaunchImage = () => {
  let that = this
  ImagePicker.launchImageLibrary({
    // title: '请选择图片来源',
    // cancelButtonTitle: '取消',
    // takePhotoButtonTitle: '拍照',
    // chooseFromLibraryButtonTitle: '相册图片',
    // customButtons: [
    //   {name: 'baidu', title: 'baidu.com图片'},
    // ],
    // cameraType: 'back',
    // mediaType: 'photo',
    // videoQuality: 'high',
    // maxWidth: 300,
    // maxHeight: 300,
    // quality: .8,
    // noData: true,
    storageOptions: {
      skipBackup: true,
    },
  }, (response) => {
    // console.log(response)
    if(response.didCancel){
      console.log('user cancelled')
    }else if(response.error){
      console.log('ImagePicker Error')
    }else{
      let source = { uri: response.uri }
      // let source = {uri: 'data:image/jpeg;base64,' + response.data}
      that.setState({ imgsrc: source })
      that.scrollToBottom(true)
    }
  })
}

总结

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

Javascript 相关文章推荐
js获取当前路径的简单示例代码
Jan 08 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
javascript实现智能手环时间显示
Sep 18 Javascript
Vue 自定义指令功能完整实例
Sep 17 #Javascript
JS扁平化输出数组的2种方法解析
Sep 17 #Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 #Javascript
uni app仿微信顶部导航条功能
Sep 17 #Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 #Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 #Javascript
解决layui轮播图有数据不显示的情况
Sep 16 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
详解JavaScript函数
2015/12/01 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
python实现简单的文字识别
2018/11/27 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
python把转列表为集合的方法
2019/06/28 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
Shell脚本如何向终端输出信息
2014/04/25 面试题
视光学专业毕业生推荐信
2013/10/28 职场文书
护理学毕业生求职信
2013/11/14 职场文书
商场中秋节活动方案
2014/02/07 职场文书
国际商务专业求职信
2014/07/15 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
MySQL之DML语言
2021/04/05 MySQL