react react-native render navigator

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