How to use react to implement a boot page

How to use react to implement the boot page: 1. Create a startup interface with code such as "import React, { Component } from 'react'; import{AppRegistry,StyleSheet,Text,View,AsyncStorage...} "; 2. Determine each startup and obtain whether the attributes loaded for the first time have been saved before. If it has been loaded, the home page will be displayed. If it has not been loaded, the boot page will be displayed.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to use react to implement the boot page?

Preface

Seeing that many companies are beginning to try to use ReactNative to achieve cross-platform development, I have also written many articles recently, hoping to help more students who want to know more get started quickly. ReactNative.

ReactNative's App guide page implementation logic

• Implementing the guide page in RN is much more complicated than the native implementation.
• Reasons:
• 1. The native configuration information info.plist file cannot be read in RN, so it is impossible to determine whether the current version is the latest version. If it is the latest version, the boot page will be displayed
• 2. The local storage of RN is asynchronous, not synchronous. This will cause an error to be reported at the beginning if you want to obtain the local storage information and judge whether to display the boot page or the homepage based on the storage information
  • The reason for the error is very simple. As soon as the program starts, the interface needs to be displayed immediately, but due to asynchronousness, it cannot return so quickly.

Solution to the RN guide page:

• Write a startup interface by yourself, display the startup interface at the beginning
• Then after the startup interface is displayed, determine whether to display the boot page or the homepage later

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

• Enter the interface for the first time, write an attribute, and record the first load.
• Every time it is started, get whether the attributes loaded for the first time have been saved before. If it has been loaded, the home page will be displayed. If it has not been loaded, the boot page will be displayed.

App boot 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:&#39;LaunchImage&#39;}} style={{width:Common.screenW,height:Common.screenH}}/>
        )
    }

    componentDidMount() {
        // 延迟点
        setTimeout(this.openApp.bind(this),2000);
        // this.openApp();
    }

    openApp(){
        AsyncStorage.getItem(&#39;isFirst&#39;,(error,result)=>{

            if (result == &#39;false&#39;) {
                console.log(&#39;不是第一次打开&#39;);

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

            } else  {

                console.log(&#39;第一次打开&#39;);

                // 存储
                AsyncStorage.setItem(&#39;isFirst&#39;,&#39;false&#39;,(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}}
            />
        );


    }
    }

Achievement effect

First time entering

##Startup page

Guidance page

After entering, go directly to the home page

Homepage

Recommended learning: "

react video tutorial"

The above is the detailed content of How to use react to implement a boot page. For more information, please follow other related articles on the PHP Chinese website!