ReactNavigation＆Redux：当redux状态改变时，所有屏幕都使用StackNavigator重新渲染

Question

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

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

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

问题是当导航到第二个用户屏幕时，redux存储会发生变化，因此所有以前的用户屏幕都会使用新的道具进行重新渲染。

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

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

解决方案所以我想在所有UserScreens上使用componentShouldUpdate并检查它的activeScreen return true是否其他方面阻止重新渲染并保持屏幕没有变化。

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

Answer 1

这有点晚了，但希望这会有助于另一个有同样问题的人。这是我的解决方案。

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

示例代码：

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导致此问题。建议是非常智能地划分您的减速器以避免此问题。

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

• 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示例可以在离开您的链接中找到。