React Native导航器renderScene被多次调用

Question

我是一名能够帮助翻译文本的助手。下面是需要翻译的内容：

我一直在RN Navigator中被难住，试图弄清楚为什么Navigator会渲染其堆栈中推入的所有路由。

最初

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

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

在推送第二个路由并记录路由，当调用renderScene时会产生以下结果:

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

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

}

- DritanX

---

你能分享一下你的 renderScene 实际上是什么样子吗？还有你的 <Navigator initialRoute={name:"Route 1", index: 1} /> 缺少了一对花括号，它应该是 <Navigator initialRoute={{name:"Route 1", index: 1}} />。 - rclai

我已经更新了问题以反映您正在寻找的代码，并且我在我的代码中加入了括号 - 修复了拼写错误。 - DritanX

是的，这很奇怪。我有同样的问题，但只在initialRoute中有2个路由（渲染2次）并使用navigationState传递堆栈时出现（但不推入任何内容）。 - Dominic

我也遇到了同样的问题，而且它与initialRoute没有任何关系。你找到解决方法了吗？ - Cyclonus

看起来是一个已知的 bug：https://github.com/facebook/react-native/issues/2536 和 https://github.com/facebook/react-native/issues/952 - Cyclonus

我也遇到了这个问题。你能找到解决方法吗？另外，在你的分析中，场景中不可见的组件是卸载的，还是仍然存在？ - YSK

Answer 1

我曾经遇到过类似的问题（它在启动时调用了我定义的所有路由）。一旦我从Navigator属性中删除了initialRouteStack，这种情况就停止发生了。

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

- roocell

Answer 2

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

- leo7r

---

我在所有情况下都使用该方法返回JSX。如果没有数据，我将返回一个"空白页"JSX组件。 - DritanX