程序啟動的時候,如果是第一次,進入引導(dǎo)頁 如果不是第一次,直接進入main

App.js

/**
 * @providesModule App
 */
import React, {Component} from 'react'
// 2.導(dǎo)入常用組件,注冊組件,樣式組件,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'

/*
* 程序啟動的時候,如果是第一次,進入引導(dǎo)頁 如果不是第一次,直接進入main
* RN獲取不到版本號
* 本地存儲: 第一次進入的時候,記錄下
* 第二次,從本地存儲中獲取 有沒有第一次進入信息,如果有,就直接顯示main
* */

/*
* 解決引導(dǎo)頁延遲加載問題
* 1.自己實現(xiàn)啟動界面
* 2.等1秒執(zhí)行引導(dǎo)頁
* */

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

    guideApp(){
        // 1.讀取本地數(shù)據(jù)
        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對象轉(zhuǎn)換為字符串 用來存儲
        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('刪除成功');
            }
        });
    }