怎麼用react實作引導頁

用react實作引導頁的方法：1、建立一個啟動介面，程式碼如「import React, { Component } from 'react';import{AppRegistry,StyleSheet,Text,View,AsyncStorage...} 」；2、判斷每次啟動，取得之前是否保存過第一次載入的屬性，如果載入過就顯示主頁，沒載入過就顯示引導頁。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

怎麼用react實作引導頁？

前言

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

ReactNative之App引導頁實作邏輯

• 在RN中實作引導頁，相比原生實作複雜多了。
• 原因：
• 1.RN中不能讀取原生的設定資訊info.plist文件，這樣也就沒法判斷目前是不是最新版本，是最新版本就展示引導頁
• 2.RN的本地存儲是異步的，不是同步的，這樣就導致在一開始的時候，想去獲取本地存儲信息，根據存儲信息判斷顯示引導頁還是主頁，就會報錯
  • 報錯原因很簡單，程式一啟動，就需要立刻顯示介面，但是由於異步，並不能那麼快返回.

##RN引導頁解決思路:

自己寫一個啟動介面，一開始的時候顯示啟動​​介面
• 然後在顯示完啟動介面的方法，去判斷待會顯示引導頁，還是主頁

如何判斷顯示引導頁或首頁

第一次進入介面，寫個屬性，記錄下第一次載入。
• 每次啟動，取得之前是否已儲存過第一次載入的屬性，如果載入過，就顯示主頁，沒載入過，就顯示引導頁

App引導頁實作程式碼

/**
 * 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:&#39;LaunchImage&#39;}} style={{width:Common.screenW,height:Common.screenH}}/>
        )
    }

    componentDidMount() {
        // 延迟点
        setTimeout(this.openApp.bind(this),2000);
        // this.openApp();
    }

    openApp(){
        AsyncStorage.getItem(&#39;isFirst&#39;,(error,result)=>{

            if (result == &#39;false&#39;) {
                console.log(&#39;不是第一次打开&#39;);

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

            } else  {

                console.log(&#39;第一次打开&#39;);

                // 存储
                AsyncStorage.setItem(&#39;isFirst&#39;,&#39;false&#39;,(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}}
            />
        );


    }
    }

實作效果

第一次進入

啟動頁

#引導頁

#以後進入，就直接首頁

主頁

推薦學習：《

react影片教學》

以上是怎麼用react實作引導頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！