Question

RN Navigator试图弄清楚为什么Navigator会渲染其堆栈中推送的所有路线，我已经被困了一段时间。

最初

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

然后在发出navigator.push({ name : "Route 2", index: 2 })我的组件的render（）方法时，会调用该方法重新呈现Navigator，后者又调用renderScene。

在推送第二条路线并在renderScene被调用时记录路线后，得到：

渲染（） - ＆gt; renderScene（）   {name：“Route 1”，index：1}

渲染（） - ＆gt; renderScene（）   {name：“Route 2”，index：2}

有没有人知道为什么renderScene（）会被多次调用，因为Navigator的堆栈中有路由？这是预期的行为，如果它是如何加速渲染？

在最终渲染最后一个推送路线的场景之前尝试渲染5条路线的场景时会有很大的性能损失，而实际上它应该只调用render（）一次以仅渲染最后推送路线的场景。

非常感谢任何帮助。谢谢！

以下是相关摘录：

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必须返回JSX代码。您必须在<View>中返回renderScene或其他组件。我认为它会重新渲染每个场景，因为你没有提供任何组件作为返回值。

Answer 2

我遇到了类似的问题（它调用了我在启动时定义的所有路径）。我从initialRouteStack属性中移除了Navigator后，它就停止了。

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

React Native Navigator renderScene多次调用

2 个答案: