如何使用react实现引导页

发布时间：2023-07-11 11:30:39 所属栏目：教程来源：网络

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

　　本篇内容主要讲解“如何用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实现引导页

　　启动页

　　如何用react实现引导页

　　引导页

　　以后进入，就直接主页

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!