如何用react實現引導頁

本篇內容主要講解“如何用react實現引導頁”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何用react實現引導頁”吧!

用react實現引導頁的方法：1、創建一個啟動界面，代碼如“import React, { Component } from 'react';import{AppRegistry,StyleSheet,Text,View,AsyncStorage...}”；2、判斷每次啟動，獲取之前是否保存過第一次加載的屬性，如果加載過就顯示主頁，沒加載過就顯示引導頁。

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:'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}}
            />
        );


    }
    }

實現效果

第一次進入

啟動頁

引導頁

以后進入，就直接主頁

到此，相信大家對“如何用react實現引導頁”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！