Comment utiliser React pour implémenter une page de démarrage-Questions et réponses frontales-php.cn

Comment utiliser React pour implémenter une page de démarrage

藏色散人

Libérer： 2023-01-06 15:44:27

original

2093 Les gens l'ont consulté

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Avant-propos

Constatant que de nombreuses entreprises commencent à essayer d'utiliser ReactNative pour réaliser un développement multiplateforme, j'ai également écrit de nombreux articles récemment, dans l'espoir de permettre à davantage d'étudiants qui souhaitent en savoir plus de se lancer rapidement avec ReactNative.

Logique d'implémentation de la page de guide de l'application ReactNative

L'implémentation de la page de guide dans RN est beaucoup plus compliquée que l'implémentation native.
Raison :
1. Le fichier info.plist des informations de configuration natives ne peut pas être lu dans RN, il est donc impossible de juger si la version actuelle est la dernière version. S'il s'agit de la dernière version, la page de démarrage s'affichera.
2. Le stockage local de RN est asynchrone, non synchrone, ce qui signifie qu'au début, si vous souhaitez obtenir des informations de stockage local et juger s'il faut afficher la page de démarrage ou la page d'accueil en fonction des informations de stockage, un l'erreur sera signalée
- La raison de l'erreur est très simple. Dès que le programme démarre, vous devez immédiatement L'interface s'affiche, mais en raison de l'asynchrone, elle ne peut pas revenir aussi rapidement.

Solution au Page de démarrage RN :

Écrivez vous-même une interface de démarrage et affichez l'interface de démarrage au début
Et puis une fois l'interface de démarrage affichée, pour déterminer si la page de démarrage ou la page d'accueil sera affichée plus tard

Comment pour déterminer si la page de démarrage ou la page d'accueil sera affichée

Entrez dans l'interface pour la première fois, écrivez un attribut et enregistrez le premier chargement.
À chaque démarrage, vérifiez si le premier attribut chargé a été enregistré auparavant. S'il a été chargé, la page d'accueil sera affichée. S'il n'a pas été chargé, la page de démarrage sera affichée

Démarrage de l'application. code d'implémentation de la page

/**
 * 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}}
            />
        );


    }
    }

Copier après la connexion