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

}