react native - react - Reaccionar Native Navigator renderScene llamado varias veces

react navigation v2

Question

Estuve un rato perplejo con RN Navigator tratando de descubrir por qué Navigator procesa todas las rutas en su pila.

Inicialmente

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

Luego, al emitir un navigator.push({ name : "Route 2", index: 2 }) se llama al método render () de mi componente, que renderScene Navigator, que a su vez llama a renderScene .

Después de presionar la segunda ruta y registrar la ruta cuando renderScene obtiene el llamado, cede a:

Render () -> renderScene (), {nombre: "Ruta 1", índice: 1}

Render () -> renderScene (), {nombre: "Ruta 2", índice: 2}

¿Alguien sabe por qué el renderScene () se llama tantas veces como hay rutas dentro de la pila del navegador? ¿Este es el comportamiento esperado y, si lo es, cómo podemos acelerar el renderizado?

Hay un rendimiento significativo al intentar renderizar escenas de 5 rutas antes de representar finalmente la escena para la última ruta empujada, cuando en realidad debería estar llamando a render () una vez para representar solo la escena de la última ruta empujada.

Cualquier ayuda es muy apreciada. ¡Gracias!

Estos son los fragmentos relevantes:

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 debe devolver un código JSX. Debe devolver un <View> u otro componente en su renderScene . Creo que vuelve a renderizar cada escena porque no está proporcionando ningún componente como valor de retorno.

Answer 2

Tuve un problema similar (llamaba a todas las rutas que había definido al inicio). Una vez que initialRouteStack de las Propiedades del Navigator , dejó de suceder.

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