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

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


    }
    }

Effet de réussite

Une fois que vous entrez dans la

page de démarrage

page de guide

, puis accédez directement à page d'accueil

Page d'accueil

Apprentissage recommandé : "Tutoriel vidéo React》