Réagir Native Navigator renderScene appelé plusieurs fois

Question

Je suis resté perplexe pendant un moment avec RN Navigator essayant de comprendre pourquoi Navigator rend toutes les routes poussées dans sa pile.

Dans un premier temps

<Navigator initialRoute={{name:"Route 1", index: 1}} /> 

ensuite sur l'émission d'un navigator.push({ name : "Route 2", index: 2 }) le rendu() de mon composant qui est appelé re-Navigator rend, ce qui appelle à son tour renderScene.

Après avoir poussé le 2ème itinéraire et enregistrer l'itinéraire lorsque renderScene est appelé à des rendements:

rendu() -> renderScene(), {name: "Route 1", index: 1}

render() -> renderScene(), {name: "Route 2", index: 2}

est-ce que quelqu'un sait pourquoi le renderScene() est appelée autant de fois que il y a des routes à l'intérieur la pile du navigateur? Est-ce un comportement attendu et si c'est comment pouvons-nous accélérer le rendu? Il y a un impact significatif sur les performances lorsque vous tentez de rendre des scènes de 5 routes avant de rendre la scène pour la dernière route poussée, alors qu'en réalité, il devrait appeler render() une seule fois pour rendre la scène de la dernière route poussée .

Toute aide est grandement appréciée. Merci!

Ce sont les extraits pertinents:

nav.js 

export function ListPage(){ 
    return { 
     name: LIST_PAGE, 
     index: 1 
    } 
} 


Main App 

<Navigator 
     ref={(ref) => this.navigator = navigator = ref} 
     initialRoute={nav.ListPage()} 
     renderScene={(route,navigator)=>this.renderListingsScene(route,navigator)} 
/> 

renderListingsScene(route, navigator){ 
     console.log("renderScene()", route); 

} 

Answer 1

renderListingsScene doit retourner un code JSX. Vous devez renvoyer un <View> ou un autre composant dans votre renderScene. Je pense qu'il rendra chaque scène parce que vous ne fournissez aucun composant comme valeur de retour.

Answer 2

J'ai eu un problème similaire (il appelait toutes les routes que j'avais définies au démarrage). Une fois que j'ai retiré le initialRouteStack des propriétés Navigator, il a cessé de se produire.

<Navigator 
      initialRoute={routes[0]} 
      //initialRouteStack={routes} 
      renderScene={ (route, navigator) => this._renderScene(route, navigator) } 
/>