• 技术文章 >web前端 >前端问答

    怎么用react实现引导页

    藏色散人藏色散人2023-01-06 15:44:27原创120

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

    实现效果

    第一次进入

    9fd3aa8e42559b7d625936bb14a90e5.jpg
    启动页
    665f487837eac2cf6ba8ada052ae4d0.jpg
    引导页

    以后进入,就直接主页

    d86e7e01a99bc0a112b32729d29afb5.jpg

    主页

    推荐学习:《react视频教程

    以上就是怎么用react实现引导页的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React
    上一篇:ie8支持html5吗 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react native路由跳转怎么实现• react路由页面不刷新怎么办• webstorm react 报错怎么办• react不显示PDF生成信息怎么办• react跳转前记住页面状态怎么实现
    1/1

    PHP中文网