多次调用 React Native Navigator renderScene答案

【问题标题】：React Native Navigator renderScene called multiple times多次调用 React Native Navigator renderScene
【发布时间】：2017-01-25 02:52:32
【问题描述】：

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

最初

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

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

在推送第二条路线并在调用 renderScene 时记录路线后，将产生：

渲染() --> 渲染场景(), {name:"Route 1", index: 1}

渲染() --> 渲染场景(), {name:"Route 2", index: 2}

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

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

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

这些是相关的sn-ps：

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

}

【问题讨论】：

您能分享一下您的renderScene 的实际样子吗？另外你的<Navigator initialRoute={name:"Route 1", index: 1} /> 缺少一对花括号，应该是<Navigator initialRoute={{name:"Route 1", index: 1}} />
我已经更新了问题以反映您正在寻找的代码，并且我的代码中有括号 - 修正了错字
是的，这很奇怪。我有同样的问题，但在 initialRoute 中只有 2 条路由（渲染 2x）并使用 navigationState 传递堆栈（但不推任何）
我遇到了同样的问题，而且它根本不受 initialRoute 的影响。你找到解决办法了吗？
看起来像一个已知错误：github.com/facebook/react-native/issues/2536 和 github.com/facebook/react-native/issues/952

标签： react-native render navigator

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

renderListingsScene 必须返回一个 JSX 代码。您必须返回<View> 或renderScene 中的其他组件。我认为它会重新渲染每个场景，因为您没有提供任何组件作为返回值。

【讨论】：

我在所有情况下都有返回 JSX 的方法。如果没有数据，我会返回一个“空页面”JSX 组件