native聊天界面 react_react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面

一、前言

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-navigationrn

弹窗组件：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"

}

}

<