How to use react to implement a boot page-Front-end Q&A-php.cn

How to use react to implement a boot page

藏色散人

Release： 2023-01-06 15:44:27

Original

2102 people have browsed it

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

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 &#39;react&#39;;import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    AsyncStorage,
    Image} from &#39;react-native&#39;;import Main from &#39;./Main/Main&#39;import {Navigator} from &#39;react-native-deprecated-custom-components&#39;import Guide from &#39;./Guide/Guide&#39;import Common from &#39;./Common/Common&#39;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}}
            />
        );


    }
    }

Copy after login

Achievement effect

First time entering

How to use react to implement a boot page

##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!