具有持久场景的 React Native 导航器

Question

这是一种非常常见的应用 UX 设计模式，我正在尝试找出如何在 React Native 中最好地实现它：

用户可以在导航场景之间切换而不会丢失滚动位置...

---

默认情况下，React Navigator 组件希望在用户切换选项卡时重新渲染每个场景。这有两个缺点：

• 对于复杂的场景，在场景重新渲染时会出现不必要的延迟。
• 当用户返回某个场景（例如主页）时，她会失去滚动位置以及该场景中的任何临时 UX 状态（例如展开的单元格等）

问题：有没有办法在导航器更改之间保留场景以避免重新渲染它们？

我正在为我的导航器模式使用以下组件布局：

附言我知道 React 的通量/路由模式更喜欢重新渲染场景，因为它更喜欢将 UX 状态完全捕获在一个路由状态对象中，但在这种情况下，我真的想避免重新渲染面板的缺点，因为它会创建一个更糟糕的用户界面....Instagram 就是一个可以无缝执行此操作的应用示例。

Answer 1

如果您正在推送和弹出场景，它将重新渲染它们。

为避免这种情况，您可以从导航器的 initialRouteStack 属性中指定的所有场景开始，然后使用导航器的 jumpTo(route) 方法在它们之间进行转换，而无需卸载和重新渲染。这应该保留所有场景的当前状态。

Answer 2

默认情况下，React Navigator 组件希望在用户切换选项卡时重新渲染每个场景。

这是哪里来的？我在类似的模式中使用Navigator，并且secenes 是“Persist”。我不知道出了什么问题，因为这里没有代码（也许你重新渲染了Navigator？），但是接缝react-native-scrollable-tab-view 在你的例子中会很有帮助。