温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何用react实现引导页

发布时间:2023-01-06 17:30:17 来源:亿速云 阅读:130 作者:iii 栏目:web开发

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

引导页

以后进入,就直接主页

如何用react实现引导页

到此,相信大家对“如何用react实现引导页”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI