React-Native APP初次打开时出现使用介绍的代码-i

ireading-RN-微信精选的示例代码
微信精选的一个示例项目，里面有个组件就是完成初次加载app的初始化选择分类的任务，里面使用了一个标记位来决定是加载这个页面还是项目的主页面。如果在这个页面中使用swipe组件就可以完成一些app的初次打开时，使用教程的滚动橱窗效果。

直接看代码

//ireading/app/page/splash.js
//这个splash就作为开始介绍的画面加载一个swipe,第一次以后就不用加载了
import React from 'react';
import {
  Dimensions,
  Animated
} from 'react-native';
//app主页面的容器
import MainContainer from '../containers/MainContainer';
//选择分类的容器，如果初次加载要选择这个容器
import CategoryContainer from '../containers/CategoryContainer';
import Storage from '../utils/Storage';//，导入存储，为了持久化
//存储标记

const maxHeight = Dimensions.get('window').height;
const maxWidth = Dimensions.get('window').width;
const splashImg = require('../img/splash.png');//加载图片

class Splash extends React.Component {
  constructor(props) {
    super(props);
    this.state = {  //这是动画效果
      bounceValue: new Animated.Value(1)
    };
  }

  componentDidMount() {
    Animated.timing(
      this.state.bounceValue, { toValue: 1.2, duration: 1000 }
    ).start();
    this.timer = setTimeout(() => {
      const { navigator } = this.props;
      Storage.get('isInit')   //获取初次打开的标记位
      .then((isInit) => {
        if (!isInit) {  //如果为false,跳转到category组件去选择1-5分类数据
          navigator.resetTo({
            component: CategoryContainer,
            name: 'Category',
            isFirst: true   
          });
          Storage.save('isInit', true);  //同时把isInit存到本地数据库中
        } else {  //如果为isInit为true则表示已经打开过，直接跳到主容器
          navigator.resetTo({
            component: MainContainer,
            name: 'Main'
          });
        }
      });
    }, 1000);
  }

  componentWillUnmount() {
    clearTimeout(this.timer);
  }

  render() {
    return (
      <Animated.Image
        style={{ width: maxWidth,
          height: maxHeight,
          transform: [{ scale: this.state.bounceValue }] }}
        source={splashImg}
      />
    );
  }
}

export default Splash;

//如果是滚动橱窗可以在滚动到最后一页时候才改变标记位的状态