React Native Navigator renderScene defalarca çağrıldı

Question

Bir kez Navigator'ın yığındaki tüm rotaları oluşturduğunu anlamaya çalışan RN Navigator ile uğraştım.

Başlangıçta

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

Sonra bileşeninin render() yöntemi çağrılır bir navigator.push({ name : "Route 2", index: 2 }) veren üzerine sırayla renderScene çağırır Navigator, yeniden oluşturur. {: "Rota 1" endeksi: 1 name}

-> renderScene(), (Render

):

2 rotayı bastırıyor ve renderScene için verim çağrılan rotayı girdikten sonra

) (Render -> renderScene(), {name: "Rota 2" endeksi: 2}

kimse yolları içeride olduğu gibi renderScene() arzu edildiği kadar çağrılan neden biliyor mu Navigator'ın yığını? Bu beklenen bir davranış mıdır ve eğer bu eğer renderlemeyi hızlandırabilirsek?

En son itilen yol için sahneyi oluşturmadan önce, 5 yoldan oluşan sahneleri oluşturmaya çalışırken, gerçekte, yalnızca son aktarılan yolun görüntüsünü oluşturmak için render() öğesini çağırıyor olsaydı, önemli bir performans vuruşu var. .

Her türlü yardım büyük beğeni topluyor. Teşekkür ederiz!

Bu

ilgili snippet'leridir:

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 bir JSX kodu dönmelidir. renderScene'nuza bir <View> veya başka bir bileşen vermelisiniz. Herhangi bir bileşeni dönüş değeri olarak sağlamadığınız için her sahneyi yeniden oluşturduğumu düşünüyorum.

Answer 2

Benzer bir sorunum vardı (başlangıçta tanımladığım tüm rotaları çağırıyordum). initialRouteStack'u Navigator'dan kaldırdığımda Özellikler durdu.

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