如何用react实现引导页

本篇内容主要讲解“如何用React实现引导页”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何用react实现引导页”吧!

用react实现引导页的方法：1、创建一个启动界面，代码如“import React, { Component } from 'react';import{AppReGIStry,StyleSheet,Text,View,AsyncStorage...}”；2、判断每次启动，获取之前是否保存过第一次加载的属性，如果加载过就显示主页，没加载过就显示引导页。

ReactNative之App引导页实现逻辑

• 在RN中实现引导页，相比原生实现复杂多了。

• 原因：

• RN中不能读取原生的配置信息info.plist文件，这样也就没法判断当前是不是最新版本，是最新版本就展示引导页

• RN的本地存储是异步的，不是同步的，这样就导致在一开始的时候，想去获取本地存储信息，根据存储信息判断显示引导页还是主页，就会报错

• 报错原因很简单，程序一启动，就需要立马显示界面，但是由于异步，并不能那么快返回.

RN引导页解决思路:

• 自己写一个启动界面，一开始的时候显示启动界面

• 然后在显示完启动界面的方法，去判断待会显示引导页，还是主页

如何判断显示引导页还是主页

• 第一次进入界面，写个属性，记录下第一次加载。

• 每次启动，获取之前是否保存过第一次加载的属性，如果加载过，就显示主页，没加载过，就显示引导页

App引导页实现代码

 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实现引导页”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！