一、前言

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

◆ 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);    })  }}