时间戳

首页 > 解决方案 > ReactNavigation & Redux：当 redux 状态改变时，所有屏幕都使用 StackNavigator 重新渲染

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

问题描述

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

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

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

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

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

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

解决方案 所以我正在考虑componentShouldUpdate在所有 UserScreen 上使用并检查它的 activeScreen 是否会return true阻止重新渲染并保持屏幕不变。

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

标签： react-nativereduxreact-navigation

解决方案

有点晚了，但希望这能帮助其他有同样问题的人。这是我的解决方案。

  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

推荐阅读