RN学习-程序入口

程序启动的时候,如果是第一次,进入引导页 如果不是第一次,直接进入main

App.js

/**
 * @providesModule App
 */
import React, {Component} from 'react'
// 2.导入常用组件,注册组件,样式组件,View组件,Text组件
import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    AsyncStorage
}from 'react-native'

import Main from 'Main'

import Guide from 'Guide'

import Launch from 'Launch'

// react-native-deprecated-custom-components
import {Navigator} from 'react-native-deprecated-custom-components'

/*
* 程序启动的时候,如果是第一次,进入引导页 如果不是第一次,直接进入main
* RN获取不到版本号
* 本地存储: 第一次进入的时候,记录下
* 第二次,从本地存储中获取 有没有第一次进入信息,如果有,就直接显示main
* */

/*
* 解决引导页延迟加载问题
* 1.自己实现启动界面
* 2.等1秒执行引导页
* */

// 3.自定义 程序入口组件([[UIView alloc] init])
export default class App extends Component {

    guideApp(){
        // 1.读取本地数据
        var isFirst = null;

        AsyncStorage.getItem('isFirst',(error,result)=>{

                // 2.判断是否是第一次
                isFirst = result;

                // 3.第一次Guide,记录第一次
                if(isFirst){
                    this.navigator.replace({component:Main})

                } else {

                    // 记录
                    AsyncStorage.setItem('isFirst',"true",(error)=>{
                        if(error){
                            alert('保存失败');
                        }
                    });

                    this.navigator.replace({component:Guide})

                }
        });
    }

    componentDidMount() {
        setTimeout(this.guideApp.bind(this),500)
        // this.guideApp();
    }

    render(){

        return (
            <Navigator initialRoute={{
                component:Launch
            }}
                       renderScene={this.renderScene.bind(this)}
            />
        )

    }

    // 渲染组件
    renderScene(route, navigator){
        this.navigator = navigator;
        return (<route.component navigator={navigator} {...route} />)
    }

}

// 4.样式表 组件外观 尺寸,颜色
var styles = StyleSheet.create({
    viewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    }
})

知识点：

• 本地存储AsyncStorage

存储

// JSON.stringify(object): JSON对象转换为字符串 用来存储
        AsyncStorage.setItem('object',JSON.stringify(object),(error)=>{
            if (error) {
                alert('存储失败');
            } else  {
                alert('存储成功');
            }
        });

读取

AsyncStorage.getItem('object',(error,result)=>{
            if (!error) {
                console.log(result);
            }
        })

删除

delete(){
        AsyncStorage.removeItem('object',(error)=>{
            if (error) {
                alert('删除失败');
            } else  {
                alert('删除成功');
            }
        });
    }