Async Last in Reaktion india

Question

Wenn ich ein Navigationssystem mit zwei Ansichten haben:

_renderScene(route, navigator) { 
    if (route.id === 1) { 
     return <PageOne navigator={navigator} 
         setIndex={this.setIndex} /> 
    } else if (route.id === 2) { 
     return <PageTwo navigator={navigator} 
         index={this.state.index} /> 
    } 
    } 

Und wenn ich auf PageOne bin, möchte ich PageTwo vorzuladen beginnen. Gibt es eine einfache Möglichkeit, dieses asynchrone Laden zu verarbeiten, sodass die Seite bereit ist, wenn der Benutzer zum Navigieren klickt?

Stellen Sie sich vor, Seite eins ist ein Scrollview, und Seite zwei ist eine Liste von Bildern, so dass Sie beginnen möchten, die Liste der Bilder für view2 zu laden, sobald Sie zu einem Tab blättern. Wenn Sie die Registerkarte auswählen, wird die zugehörige Ansicht geladen.

Die wirkliche Verwirrung für mich ist, wie man beginnt, eine Seite im Hintergrund zu laden?

Answer 1

Ich würde zunächst beide PageOne und PageTwo im Konstruktor dieser Komponente erstellen, dann übergeben Sie die entsprechende in der Render.

Etwas wie:

_initComponent() { //to call on constructor, or right after component mounted, or when props changed. make sure this does only run once in the component lifetime. 
    this.page1 = <PageOne navigator={navigator} 
         setIndex={this.setIndex} /> 
    this.page2 = <PageTwo navigator={navigator} 
         index={this.state.index} /> 
} 

_renderScene(route, navigator) { 
    if (route.id === 1) { 
     return this.page1 
    } else if (route.id === 2) { 
     return this.page2 
    } 
    }