React Native Navigation Experimental Tab Switch Unmount/WillMount

【问题标题】：React Native Navigation Experimental Tab Switch Unmount/WillMountReact Native Navigation Experimental Tab Switch Unmount/WillMount
【发布时间】：2017-01-13 07:23:46
【问题描述】：

我们的 React Native 应用使用 Navigation Experimental NavigationCardStack。在切换选项卡 (NavigationStateUtils.jumpToIndex) 上，我切换的选项卡中的场景卸载。当我切换回原始选项卡时，相同的场景再次挂载，导致应用程序运行缓慢。

我们在这里创建了一个示例 GitHub 存储库：https://github.com/zachrnolan/RN-NavigationExperimental-Redux-Example/tree/tabs

这种行为是 Navigation Experimental 的一部分还是我们的导航实现的副作用？

【问题讨论】：

IDK 为什么您使用标签导航器。这应该由单个“场景”处理。
@Eldelshell - 感谢您的回复。我不确定大多数人是如何处理这个问题的。我们基于Pepperoni app kit 启动了我们的应用程序，这就是他们使用标签实现导航实验的方式。您是否知道任何其他按照您建议的方式处理选项卡的公共项目？

标签： javascript reactjs react-native

【解决方案1】：

这是因为您没有切换标签，而是替换了导航状态。要实际切换选项卡，您应该像这样将tabs 状态传递给NavigationCardStack（示例中的固定代码）：

<NavigationCardStack
  navigationState={tabs}
  onNavigateBack={backAction}

但是，如果我理解正确并且您想保留页面导航，请通过将导航模式一分为二并将一个嵌套到另一个来实现。例如：

<TabsContainer> - 控制标签导航并呈现 Tab1 或 Tab2（它不应该绘制标题！）。使用 state.tabNavigationState
<Tab1> - 控制页面导航，绘制页眉并呈现 Page1A 和 Page1B。使用 state.pageNavigationState
<Tab2> - 渲染 Page2（例如，没有导航，但它可以包含任何内容）

【讨论】：