react-native聊天室|RN版聊天App仿微信实例|RN仿微信

{
 "name": "RN_ChatRoom",
 "version": "0.0.1",
 "aboutMe": "QQ282310962 、 wxxy190310",
 "dependencies": {
  "react": "16.8.6",
  "react-native": "0.60.4"
 },
 "devDependencies": {
  "@babel/core": "^7.5.5",
  "@babel/runtime": "^7.5.5",
  "@react-native-munity/async-storage": "^1.6.1",
  "@react-native-munity/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"
 }
}

/
  @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>
    )
  }

  ponentDidMount(){
    // 判断是否登录
    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);
    })
  }
}

/
  @desc 本地存储函数
 /

import AsyncStorage from '@react-native-munity/async-storage'

export default class Storage{
  static get(key, callback){
    return AsyncStorage.getItem(key, (err, object) => {
      callback(err, JSON.parse(object))
    })
  }

  static set(key, data, callback){
    return AsyncStorage.setItem(key, JSON.stringify(data), callback)
  }

  static del(key){
    return AsyncStorage.removeItem(key)
  }

  static clear(){
    AsyncStorage.clear()
  }
}

global.storage = Storage

import React, { Fragment, Component } from 'react'
import { StatusBar } from 'react-native'

// 引入公共js
import './src/utils/util'
import './src/utils/storage'

// 导入样式
import './src/assets/css/mon'
// 导入rnPop弹窗
import './src/assets/js/rnPop/rnPop.js'

// 引入页面路由
import PageRouter from './src/router'

class App extends Component{
 render(){
  return (
   <Fragment>
    {/ <StatusBar backgroundColor={GStyle.headerBackgroundColor} barStyle='light-content' />