React Native/Redux应用程序中可能的导航问题 [英] Possible navigation issue in React Native/Redux app

问题描述

在使用Redux的大型React Native应用程序中导航期间，所有访问的场景(导航堆栈中的场景)均保持挂载状态.所有这些场景都接收道具，并从最后一个场景组件派出任何动作时按访问顺序渲染它们.这会导致分派和最后一个场景渲染之间停滞和可见的延迟.

During navigation in big React Native app with using Redux all visited scenes (scenes from navigation stack) are staying mounted. All these scenes receive props and get rendered in the order they were visited when any action is dispatched from last scene component. It causes freezes and visible delays between dispatching and last scene rendering.

对于导航，我使用的是 react-native-router-flux ，但相同原始的React Native Navigator也会发生问题.

For navigation I am using react-native-router-flux but same issue happens with original React Native Navigator too.

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

代码 react-redux-navigation-test

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

Would be nice to know how to prevent passing props to not focused components from the navigation chain.

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

At the moment I am checking in shouldComponentUpdate of each component if this one is focused(visible) and return false in opposite case.

有没有更好的解决方案?

Is there any better solution?

推荐答案

我建议您使用场景和标头渲染方法中的导航索引计算当前场景与要渲染的场景之间的场景距离.如果距离> 1，则返回null.

I recommend that you calculate the scene distance between the current scene and scene being rendered using the navigation index in the scene and header rendering methods. If the distance > 1 return null.

这应避免呈现整个导航历史记录.对于我来说，这种行为不是开箱即用就没有，但是确实存在.

This should prevent rendering the entire navigation history. It doesn't make any sense to me that this kind of behaviour is not available out of the box, but there it is.

这篇关于React Native/Redux应用程序中可能的导航问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！