react-native - react 导航和 Redux : All screens rerender using a StackNavigator when redux state is changed

Question

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

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

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

问题是当导航到第二个用户屏幕时，redux 存储发生变化，结果所有以前的用户屏幕都使用新 Prop 重新呈现。

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

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

解决方案所以我想在所有 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