native聊天界面 react_react-native仿微信app界面聊天室|RN_chatRoom群聊|红包

react native高仿微信app实例|RN仿微信界面|红包|朋友圈

项目中使用到的弹窗插件：rnPop自定义模态组件|toast提示|dialog对话框

最近一直都在捣鼓react native原生app开发，之前也有使用vue/react/angular等技术开发过聊天室IM，这次是利用RN技术开发的原生app体验。

概述

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

预览

技术实现

MVVM框架：react / react-native / react-native-cli

状态管理：react-redux

页面导航：react-navigation

rn弹窗组件：rnPop

打包工具：webpack 2.0

轮播组件：react-native-swiper

图片选择：react-native-image-picker

{

"name": "RN_ChatRoom",

"aboutMe": "QQ：282310962 、 wx：xy190310",

"scripts": {

"start": "react-native start",

"test": "jest",

"lint": "eslint ."

},

"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-communi