如何保持反应导航组件之间的共同状态？答案

【问题标题】：How to keep a common state between react-navigation components?如何保持反应导航组件之间的共同状态？
【发布时间】：2019-01-30 08:26:06
【问题描述】：

考虑一个简单的stack navigator 使用react-native 导航器：

const stackNav = createStackNavigator(
  {
    CustomerList: {
      screen: CustomerList,
      navigationOptions: {
        title: "Select a customer"
      }
    },
    CustomerDetail: {
      screen: CustomerDetail
    }
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: colors.dark
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold"
      }
    }
  }
);

export default stackNav;

CustomerDetail 使用 navigation 属性从 CustomerList 中调用。

CustomerList 和 CustomerDetail 都包含特定的状态，例如用户单击以打开详细信息的列表中的位置、列表中的选定项目、详细信息深度等。

我注意到，在从CustomerList 到CustomerDetail 的每个屏幕更改上，组件都在重新渲染，调用componentWillMount。这样一来，我就失去了我之前的所有状态，导致列表和细节上的用户上下文松动。

我需要一种存储状态的方法，我可以想到 3 个选项：

一个。然后存储在 React Context 上，然后在 `componentWillMount` 上重新加载

b.将状态存储在 AsyncStorage 上

c。找到一种在CustomerDetail 和`CustomerList` 之间共享公共状态的方法

(a) 和 (b) 在这里没有看到这种情况，所以我的问题是如何在 react navigatior 上的 2 个组件之间共享一个公共状态。我很确定这应该很简单，但我不知道该怎么做。

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

另一个选项是在导航操作中传递参数。 navigation.navigate 方法接受第二个参数（对象），它将在您的下一个屏幕中可用。

navigation.navigate('CustomerDetail', { someData: 'yo' })

然后在 CustomerDetail 中您可以按如下方式访问它：

this.props.navigation.state.params.someData

或者：

this.props.navigation.getParam(paramName, defaultValue)

阅读this

【讨论】：

嗨，你能看看我的问题吗？ stackoverflow.com/questions/66548327/…

【解决方案2】：

如果你想在不同的组件之间共享状态，有两种方法：

选项 1：使用父组件

使用最接近组件的共同祖先来保存您想要的所有数据，然后通过 props 向下传递数据。如果您希望这些子组件能够修改数据，请让父组件传递一个（或多个）回调函数来更新父组件的状态。

这是一种简单的轻量级方法。

选项 2：使用 Redux

Redux 可以保存您的应用程序的整个状态，并且可以从您想要的任何组件访问和更新。

如果您要使用许多不同的组件或以许多不同的方式执行此操作，这就是您想要的方式。缺点是设置起来确实需要一些努力，所以如果这是你的应用程序中唯一需要各种组件共享状态的时候，那么 Redux 可能是矫枉过正，但如果你有更多或者事情变得更复杂，那就是不错的选择。

这里是关于 Redux 的文档：https://redux.js.org/，特别是关于 React 的使用：https://redux.js.org/basics/usagewithreact

【讨论】：