Question

我在React Native项目上使用Redux和ReactNavigation。

在我的特定情况下，用户可以从一个UserScreen导航到另一个UserScreen。

我想将上一个屏幕保留在堆栈中，以便用户可以导航回到上一个屏幕。我正在使用this.props.navigation.push("UserScreen")将新屏幕推送到堆栈上。

问题是，导航到第二个用户屏幕时，redux存储会更改，结果所有以前的用户屏幕都将使用新道具重新呈现。

当用户导航回到上一个屏幕时，它将看到与新屏幕完全相同的屏幕，因为所有屏幕都已重新呈现。

我认为这是一个常见的问题，因为大多数应用程序允许用户使用不同的数据集导航到同一屏幕。

解决方案 因此，我正在考虑在所有用户屏幕上使用componentShouldUpdate，并检查其activeScreen return true是否可以防止重新渲染并保持屏幕不变。

有人有更好的解决方案吗？有示例代码吗？

Answer 1

为时已晚，但希望对其他有相同问题的人有所帮助。这是我的解决方法。

导航到屏幕时，更新导航参数中的内容以告知屏幕已聚焦，并禁用其余屏幕的聚焦状态。
在组件中检查渲染前的焦点状态。

示例代码：

SideMenuNav.navigationOptions = ({ navigation }) => {
const { routeName } = navigation.state.routes[navigation.state.index];
navigation.state.routes.forEach((route, ind) => {
    if (!route.params) route.params = {}
    if (ind === navigation.state.index) route.params.isFocused = true
    else route.params.isFocused = false
})

查看更多信息：

https://reactnavigation.org/docs/en/redux-integration.html

https://medium.com/async-la/a-stately-guide-to-react-navigation-with-redux-1f90c872f96e

Answer 2

如果在所有视图中的reducer中都添加了相同的connect，则会导致此问题。建议您非常明智地对减速器进行划分，以避免此问题。

在某些情况下这是无法避免的，因此有必要采用两种解决方案，这些解决方案如果应用于时间，将大大提高应用程序的性能。

componentShouldUpdate
selectors 。

pureComponent也被推荐，但对我来说并没有太大的不同。

shouldComponentUpdate的示例：

shouldComponentUpdate(nextProps: Props) {
    if (objectNotEquals(this.props.items, nextProps.items) || (this.props.collectionLooksSelected !== nextProps.collectionLooksSelected) || objectNotEquals(this.props.executingRequest, nextProps.executingRequest)) {
      return true;
    }

    return false;
  }

selectors示例可在离开您的链接中找到。

ReactNavigation和Redux：更改Redux状态后，所有屏幕均使用StackNavigator重新呈现

2 个答案: