React Native/Redux应用程序中可能存在的导航问题

Question

在使用Redux的大型React Native应用程序中导航期间,所有访问过的场景(来自导航堆栈的场景)都保持挂载状态.当从最后一个场景组件调度任何动作时,所有这些场景都接收道具并按照它们被访问的顺序进行渲染.它会导致调度和最后一次场景渲染之间的冻结和可见延迟.

对于导航我使用的是react-native-router-flux,但同样的问题也发生在原始的React Native Navigator上.

视频React Native/Redux应用程序中可能存在的导航问题

代码react-redux-navigation-test

很高兴知道如何防止将道具传递给导航链中没有聚焦的组件.

目前,我正在检查每个组件的shouldComponentUpdate,如果这个组件被聚焦(可见)并且在相反的情况下返回false.

有没有更好的解决方案？

Answer 1

我没有使用过react-native-router-flux，但是我确实有使用相当大的React Native 和Redux 应用程序的经验。我注意到，有时如果您正在处理的数据足够大，可能会导致明显的延迟，但这些延迟大多仅限于开发中的工作。当应用程序构建完成后，它通常会明显更快。Redux 在开发和生产模式中的做法似乎有些不同。

关于仍在安装的导航堆栈中的场景，这是设计使然。即使您navigator.push转到另一个屏幕，以前的屏幕也会保持安装状态，直到它们从 中弹出currentRouteStack或从 中替换currentRouteStack。

另外，可能值得注意的是您的模拟器处于慢速动画模式。不确定您是否为了视频而这样做，但导航速度缓慢部分是由于此原因。请注意，以防万一不是故意的。

在进一步解决性能问题之前，我会检查应用程序在构建后的运行情况，并且它不处于开发模式。对于最终的应用程序产品来说可能不是问题。