前言

眼看很多公司都開始嘗試使用ReactNative,達到跨平臺開發(fā)，最近也寫了很多文章，希望讓更多想了解的同學(xué)快速上手ReactNative.

如果喜歡我的文章，可以關(guān)注我微博:袁崢Seemygo

ReactNative之App引導(dǎo)頁實現(xiàn)邏輯

• 在RN中實現(xiàn)引導(dǎo)頁，相比原生實現(xiàn)復(fù)雜多了。
• 原因：
• 1.RN中不能讀取原生的配置信息info.plist文件，這樣也就沒法判斷當(dāng)前是不是最新版本，是最新版本就展示引導(dǎo)頁
• 2.RN的本地存儲是異步的，不是同步的，這樣就導(dǎo)致在一開始的時候，想去獲取本地存儲信息，根據(jù)存儲信息判斷顯示引導(dǎo)頁還是主頁，就會報錯
  • 報錯原因很簡單，程序一啟動，就需要立馬顯示界面，但是由于異步，并不能那么快返回.

RN引導(dǎo)頁解決思路:

• 自己寫一個啟動界面，一開始的時候顯示啟動界面
• 然后在顯示完啟動界面的方法，去判斷待會顯示引導(dǎo)頁，還是主頁

如何判斷顯示引導(dǎo)頁還是主頁

• 第一次進入界面，寫個屬性，記錄下第一次加載。
• 每次啟動，獲取之前是否保存過第一次加載的屬性，如果加載過，就顯示主頁，沒加載過，就顯示引導(dǎo)頁

App引導(dǎo)頁實現(xiàn)代碼

/**
 * Created by ithinkeryz on 2017/5/15.
 */

import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    AsyncStorage,
    Image
} from 'react-native';

import Main from './Main/Main'

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

import Guide from './Guide/Guide'

import Common from './Common/Common'

class LaunchView extends Component {
    render(){
        return (
            <Image source={{uri:'LaunchImage'}} style={{width:Common.screenW,height:Common.screenH}}/>
        )
    }

    componentDidMount() {
        // 延遲點
        setTimeout(this.openApp.bind(this),2000);
        // this.openApp();
    }

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

            if (result == 'false') {
                console.log('不是第一次打開');

                this.props.navigator.replace({
                    component:Main
                })

            } else  {

                console.log('第一次打開');

                // 存儲
                AsyncStorage.setItem('isFirst','false',(error)=>{
                    if (error) {
                        alert(error);
                    }
                });

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

export default class App extends Component {

    // 渲染場景
    _renderScene(route, navigator){
        return (
            <route.component navigator={navigator} {...route} />
        )
    }



    render() {
        // 判斷是不是第一次打開


        return (
            <Navigator  initialRoute={{
                component: LaunchView
            }}
                        renderScene={this._renderScene.bind(this)}

                        style={{flex:1}}
            />
        );


    }
    
}

實現(xiàn)效果

• 第一次進入

啟動頁.png

引導(dǎo)頁.png

• 以后進入，就直接主頁

主頁.png