How to implement the boot page with react

01-29-2023

This article mainly explains how to use react to implement the guide page. Interested friends may wish to take a look. The method described in this article is simple, quick and practical. Let the editor take you to learn how to implement the guide page with react!

How to implement the guide page with react: 1. Create a startup interface, code Such as import React, { Component } from 'react';import{AppRegistry,StyleSheet,Text,View,AsyncStorage...}; 2. Determine whether the properties loaded for the first time have been saved before getting each startup, if loaded The home page is displayed, and the guide page is displayed if it has not been loaded.

ReactNative's App guide page implementation logic

The implementation of the guide page in RN is much more complicated than the native implementation.
Reason:
1. The native configuration information info.plist file cannot be read in RN, so there is no There is no way to judge whether the current version is the latest version, and if it is the latest version, the guide page will be displayed
2. RN's local storage is asynchronous, not synchronous, which leads to the initial Sometimes, if you want to obtain local storage information, and judge whether to display the guide page or the home page based on the storage information, you will report an error

The reason for the error is very simple. Once the program starts, you need to The interface is displayed immediately, but due to asynchrony, it cannot return so quickly.

The solution to the RN guide page:

< p>Write a startup interface by yourself, display the startup interface at the beginning
Then after displaying the startup interface, judge whether the guide page will be displayed or the home page
p>

How to judge whether to display the guide page or the homepage

The first time you enter the interface, write an attribute, and record the first loading.
Every time you start, get whether you have saved the attributes of the first load before. If it has been loaded, it will display the home page. If it has not been loaded, it will display the guide page

App guide page implementation code

/**
 * 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() {
        // Delay point        setTimeout(this.openApp.bind(this),2000);
        // this.openApp();    }

    openApp(){
        AsyncStorage.getItem('isFirst',(error,result)=>{

            if (result == 'false') {
                console.log('Not the first time');

                this.props.navigator.replace({
                    component:Main                })

            } else  {

                console.log('First opening');

                //storage               AsyncStorage.setItem('isFirst','false',(error)=>{
                    if (error) {
                        alert(error);
                    }
                });

                this.props.navigator.replace({
                    component:Guide                })
            }
        });
    }}export default class App extends Component {

    // Render Scene    _renderScene(route, navigator){
        return (
            <route.component navigator={navigator} {...route} />        )
    }



    render() {
        //Judge whether it is opened for the first time        return (
            <Navigator  initialRoute={{                component: LaunchView            }}
                        renderScene={this._renderScene.bind(this)}                        style={{flex:1}}            />        );


    }
    }