多次调用 React Native Navigator renderScene [英] React Native Navigator renderScene called multiple times

问题描述

RN Navigator 试图弄清楚为什么 Navigator 会渲染所有推送到其堆栈中的路由，这让我难住了一段时间.

I've been stumped for a while with RN Navigator trying to figure out why Navigator renders all the routes pushed in its stack.

最初

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

然后在发出 navigator.push({ name : "Route 2", index: 2 }) 时，我的组件的 render() 方法被调用，它重新渲染 Navigator，反过来调用 renderScene.

Then upon issuing a navigator.push({ name : "Route 2", index: 2 }) the render() method of my component gets called which re-renders Navigator, which in turn calls renderScene.

在推送第二条路线并在调用 renderScene 时记录路线后:

After pushing the 2nd route and logging the route when renderScene gets called yields to:

Render() --> renderScene(),{名称:路线 1"，索引:1}

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

Render() --> renderScene(),{名称:路线 2"，索引:2}

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

有谁知道为什么 renderScene() 被调用的次数与导航器堆栈中的路由一样多?这是预期的行为，如果是，我们如何加快渲染速度?

Does anyone know why the renderScene() gets called as many times as there are routes inside the Navigator's stack? Is this is expected behaviour and if it is how can we speed up the rendering?

在最终渲染最后推送的路线的场景之前尝试渲染 5 条路线的场景时，性能受到显着影响，而实际上它应该调用 render() 一次以仅渲染最后推送的路线的场景.

There is a significant performance hit when trying to render scenes of 5 routes before finally rendering the scene for the last pushed route, when in reality it should be calling render() once for rendering only the scene of the last pushed route.

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

Any help is greatly appreciated. Thank you!

这些是相关的片段:

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);

}

推荐答案

我遇到了类似的问题(它调用了我在启动时定义的所有路由).一旦我从 Navigator 属性中删除了 initialRouteStack，它就会停止发生.

I had a similar problem (it was calling all routes I had defined at startup). Once I removed the initialRouteStack from the Navigator Properties it stopped happening.

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

这篇关于多次调用 React Native Navigator renderScene的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！