Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie React, um eine Boot-Seite zu implementieren

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

藏色散人
藏色散人Original
2023-01-06 15:44:272088Durchsuche

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.

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

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

So verwenden Sie React, um eine Boot-Seite zu implementieren
Leitfadenseite
betreten, gehen Sie direkt zur Homepage
So verwenden Sie React, um eine Boot-Seite zu implementieren

Homepage

Empfohlenes Lernen: „
react Video-Tutorial
So verwenden Sie React, um eine Boot-Seite zu implementieren

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Unterstützt IE8 HTML5?Nächster Artikel:Unterstützt IE8 HTML5?