react native - react - Reaccionar Native Navigator renderScene llamado varias veces
react navigation v2 (2)
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.
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);
}
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) }
/>