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:'LaunchImage'}} style={{width:Common.screenW,height:Common.screenH}}/> ) } componentDidMount() { // 延迟点 setTimeout(this.openApp.bind(this),2000); // this.openApp(); } openApp(){ AsyncStorage.getItem('isFirst',(error,result)=>{ if (result == 'false') { console.log('不是第一次打开'); this.props.navigator.replace({ component:Main }) } else { console.log('第一次打开'); // 存储 AsyncStorage.setItem('isFirst','false',(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
Homepage