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

本文介绍了使用react native构建仿微信原生App的聊天室,包括启动页、本地存储、模态框、消息交互、表情、图片预览、红包等功能。涉及到的技术栈有react、react-native、react-navigation、react-redux、rnPop等。
摘要由CSDN通过智能技术生成

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弹窗菜单)、消息触摸列表、发送消息、表情(动图),图片预览,拍摄图片、发红包、仿微信朋友圈等功能

预览

c90160072e7002efee68ea47cf733d6b.png

技术实现

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值