rn-project/src/pages/home.js

#### 项目介绍 类似一个脚手架的工具 此项目致力于构建一套基础，简单，可维护的 适配我司的react-native项目。可在此基础上搭建项目，封装了基础架构，基础组件，以及各种交互等；可快速进行项目搭建，开发。 # 涉及主要技术 - 1. 项目主要架构 * react native * react-navigation * redux

import React, { Component } from 'react';
import { StyleSheet, View, Text, AppState, AsyncStorage } from 'react-native';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { SafeAreaView } from 'react-navigation';
import Items from '../components/items';
import BaseStyle from '../constants/Style';
let d;
class Home extends Component {
  static propTypes = {
    navigation: PropTypes.object,
  };

  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
    };
    const {
      navigation: { navigate, state, setParams },
    } = this.props;
    global.nav = {
      state: state,
      setParams: setParams,
      router: [],
    };
    global.nav.push = (routerName, params, action) => {
      //暴露给全局
      navigate(routerName, params, action);
    };
  }

  componentDidMount = () => {
    AsyncStorage.multiGet(['token', 'userId'], (error, data) => {
      if (data[0][1] && data[1][1]) {
        //登录状态下
        global.token = data[0][1];
        global.userId = data[1][1];
        this.setState({ loginStatus: true });
      }
    });
    AppState.addEventListener('change', this._handleAppStateChange.bind(this));
  };

  componentWillUnMount = () => {
    AppState.removeEventListener('change', this._handleAppStateChange);
  };

  _handleAppStateChange(nextAppState) {
    // const { dispatch } = this.props;
    d = new Date();
    if (nextAppState === 'background') {
      //处于后台 记录下当前时间
      AsyncStorage.setItem('gestureBeginTime', d.getTime() + '');
    }
    if (nextAppState === 'inactive') {
      //切换中
    }
    if (nextAppState === 'active') {
      //处于前台
      AsyncStorage.multiGet(['token', 'userId'], (error, data) => {
        if (data[0][1] && data[1][1]) {
          //登录状态下
          AsyncStorage.getItem('gestureBeginTime', (error, time) => {
            if (time) {
              if (d.getTime() - parseFloat(time) > 1000 * 120) {
                //2分钟后 再次打开app刷新
              }
            }
          });
        }
      });
    }
  }

  render = () => {
    const {
      navigation: { navigate },
    } = this.props;
    return (
      <SafeAreaView
        style={[BaseStyle.flex, styles.homebg]}
        forceInset={{ top: 'never' }}>
        <View style={styles.container}>
          <View style={styles.titleView}>
            <Text>Cnlc UI</Text>
          </View>
          {/* list */}
          <Items
            LeftText={'基础组件'}
            //  LeftIcon={'\ue614'}
            RightIcon={'\ue615'}
            onPress={() => {
              navigate('Base');
            }}
          />
          <Items
            LeftText={'操作反馈'}
            //  LeftIcon={'\ue614'}
            RightIcon={'\ue615'}
            onPress={() => {
              navigate('OptionScreen');
            }}
          />
          <Items
            LeftText={'工具组件'}
            //  LeftIcon={'\ue614'}
            RightIcon={'\ue615'}
            onPress={() => {
              navigate('Utils');
            }}
          />
          <Items
            LeftText={'原生'}
            //  LeftIcon={'\ue614'}
            RightIcon={'\ue615'}
            onPress={() => {
              navigate('Origin');
            }}
          />
          <Items
            LeftText={'联系我们'}
            //  LeftIcon={'\ue614'}
            RightIcon={'\ue615'}
            onPress={() => {
              navigate('CallUs');
            }}
          />
        </View>
      </SafeAreaView>
    );
  };
}

const styles = StyleSheet.create({
  homebg: {
    backgroundColor: '#eee',
  },
  container: {
    ...BaseStyle.flex,
    paddingTop: 40,
  },
  titleView: {
    ...BaseStyle.row,
    ...BaseStyle.row,
    ...BaseStyle.justifyContentCenter,
    marginBottom: 15,
  },
});

const mapStateToProps = state => {
  const { AdStore } = state;
  return {
    AdStore,
  };
};

export default connect(mapStateToProps)(Home);