React Native导航器具有持久场景

时间:2015-09-16 18:57:39

标签: tabs reactjs react-native

这是一个非常常见的应用程序用户体验设计模式,我试图弄清楚如何在React Native中实现这一点:

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

navigator interaction with persisteent panels

默认情况下,当用户切换标签时,React Navigator组件想要重新渲染每个场景。这有两个缺点:

  • 对于复杂场景,当场景重新渲染时会出现不必要的延迟。
  • 当用户返回场景(例如主页)时,她在该场景中丢失了她的滚动位置和任何临时UX状态(例如,扩展的单元格等)

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

我使用以下组件布局作为导航器模式:

enter image description here

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

2 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:1)

  

默认情况下,当用户切换标签时,React Navigator组件想要重新渲染每个场景。

这是从哪里来的?我在类似的模式中使用Navigator,而secenes是"坚持"。我不知道什么是错的,因为这里没有代码(也许你重新渲染Navigator?),但接缝react-native-scrollable-tab-view会对你的例子有所帮助情况下。