Async charge dans React natif

Question

Si j'ai un navigateur avec deux vues:

_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} /> 
    } 
    } 

Et quand je suis sur PageOne, je veux commencer à précharger PageTwo. Existe-t-il un moyen facile de gérer ce chargement asynchrone afin que la page soit prête lorsque l'utilisateur clique pour naviguer? Imaginez la première page est une vue défilante et la deuxième page est une liste d'images. Vous devez donc commencer à charger la liste d'images pour view2 dès que vous faites défiler jusqu'à un onglet. De cette façon, lorsque vous sélectionnez l'onglet, il commence à charger la vue associée.

La vraie confusion pour moi est comment commencer à charger une page en arrière-plan?

Answer 1

Je voudrais initialement créer à la fois PageOne et PageTwo dans le constructeur de ce composant, puis passer le pertinent dans le rendu.

Quelque chose comme:

_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 
    } 
    }