怎么用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中文网其他相关文章！