So verwenden Sie React, um eine Boot-Seite zu implementieren

So verwenden Sie React, um die Boot-Seite zu implementieren: 1. Erstellen Sie eine Startschnittstelle mit Code wie „import React, { Component } from ‚react‘; import {AppRegistry,StyleSheet,Text,View,AsyncStorage...}“ 2. Ermitteln Sie bei jedem Start, ob die zum ersten Mal geladenen Attribute gespeichert wurden. Wenn sie geladen wurden, wird die Startseite angezeigt.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie verwende ich React, um die Leitseite zu implementieren?

Vorwort

Da viele Unternehmen beginnen, ReactNative zu verwenden, um eine plattformübergreifende Entwicklung zu erreichen, habe ich in letzter Zeit viele Artikel geschrieben, in der Hoffnung, mehr Studenten, die es schneller wissen möchten, den Einstieg in ReactNative zu ermöglichen.

Die Implementierungslogik der App-Leitfadenseite von ReactNative

• Die Implementierung der Leitseite in RN ist viel komplizierter als die native Implementierung.
• Grund:
• 1. Die native Konfigurationsinformationsdatei info.plist kann in RN nicht gelesen werden, daher ist es unmöglich zu beurteilen, ob es sich um die neueste Version handelt. Wenn es sich um die neueste Version handelt, wird die Boot-Seite angezeigt
• 2. Der lokale Speicher von RN ist asynchron und nicht synchron. Wenn Sie also zu Beginn lokale Speicherinformationen erhalten und anhand der Speicherinformationen beurteilen möchten, ob die Startseite oder die Homepage angezeigt werden soll Fehler wird gemeldet
  • Der Grund für den Fehler ist sehr einfach. Sobald das Programm gestartet wird, muss die Schnittstelle sofort angezeigt werden, aber aufgrund der Asynchronität kann sie nicht so schnell zurückkehren.

Lösung für die RN-Startseite:

• Schreiben Sie selbst eine Startschnittstelle und zeigen Sie die Startschnittstelle zu Beginn an um zu bestimmen, ob die Startseite oder die Startseite angezeigt wird
• Geben Sie die Schnittstelle zum ersten Mal ein, schreiben Sie ein Attribut und zeichnen Sie den ersten Ladevorgang auf.

Ermitteln Sie bei jedem Start, ob das erste geladene Attribut bereits gespeichert wurde. Wenn es nicht geladen wurde, wird die Boot-Seite angezeigt Seitenimplementierungscode

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


    }
    }

Erfolgseffekt
• Sobald Sie die

Startseite

Leitfadenseite

betreten, gehen Sie direkt zur Homepage

Homepage

Empfohlenes Lernen: „

react Video-Tutorial

》

Das obige ist der detaillierte Inhalt vonSo verwenden Sie React, um eine Boot-Seite zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!