Reactive Native Navigator renderScene mehrmals aufgerufen

Question

Ich bin für einige Zeit mit RN Navigator rumped versucht herauszufinden, warum Navigator alle Routen in seinem Stapel übertragen macht.

Anfänglich

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

dann auf eine Ausgabe von der navigator.push({ name : "Route 2", index: 2 }) Render() Methode meiner Komponente aufgerufen wird, die erneut rendert Navigator, die wiederum renderScene aufruft.

Nach dem zweiten Weg schieben und die Route Protokollierung, wenn renderScene Ausbeuten aufgerufen wird:

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

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

weiß jemand, warum die renderScene() so oft sind innen wie es genannt wird Routen der Stapel des Navigators? Ist dies das erwartete Verhalten und wenn können wir das Rendering beschleunigen?

Es gibt einen signifikanten Leistungseinbruch beim Versuch, Szenen mit 5 Routen zu rendern, bevor schließlich die Szene für die letzte verschobene Route gerendert wird. In Wirklichkeit sollte sie render() einmal aufrufen, um nur die Szene der letzten gedrückten Route zu rendern .

Jede Hilfe wird sehr geschätzt. Vielen Dank!

Dies sind die relevanten Schnipsel:

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 müssen JSX Code zurück. Sie müssen eine <View> oder eine andere Komponente in Ihrem renderScene zurückgeben. Ich denke, es wird jede Szene neu gerendert, weil Sie keine Komponente als Rückgabewert bereitstellen.

Answer 2

Ich hatte ein ähnliches Problem (es rief alle Routen auf, die ich beim Start definiert hatte). Sobald ich die aus den Navigator Eigenschaften entfernt, hörte es auf.

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