多次调用 React Native Navigator renderScene

Posted 2023-02-22

【中文标题】多次调用 React Native Navigator renderScene

【英文标题】：React Native Navigator renderScene called multiple times

【发布时间】：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

【参考方案1】：

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

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

【参考方案2】：

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

【讨论】：

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