如何在 React Native 屏幕之间共享状态？

Question

我正在尝试使用 React Native 和 React 导航构建一个应用程序，这样在一个屏幕中更改某些内容也会在另一个屏幕中更改它。

到目前为止，我发现能够在两个屏幕之间同步数据的唯一方法是使用带有onPress={() => navigate('OtherScreen', this.state)} 。 这有两个问题。 首先，它仅适用于我明确调用导航的地方 - 当我滑动以更改屏幕时，它不会传输数据。 但大多数情况下，这似乎与 React 哲学背道而驰，数据应该通过渲染调用从模型中提取，而不是一个渲染方法将数据推送到另一个组件中。

这已经完全难倒我了。 我当前的“解决方案”是将我的整个应用程序编写在一个文件中，以便所有内容都在同一范围内，并且我可以使用全局变量来存储全局状态。

我不可能是第一个遇到这个问题的人，我发现很难想象 react-native 没有任何内置方法来定义应用程序范围的数据存储。

是否有在 react-native 中全局共享数据的标准模式？

如何在两个屏幕之间同步数据？

Answer 1

您可以使用Context或Redux在容器（屏幕）或组件之间共享。

Context旨在共享可被视为 React 组件树的“全局”数据，例如当前经过身份验证的用户、主题或首选语言。

Redux是 JavaScript 应用程序的可预测状态容器。

Answer 2

我解决这个问题的经验是：

a) 不要使用不允许您在导航功能中设置参数的选项卡视图模板（或类似模板）。 通过这种方式，您可以在所有屏幕上传递所需的参数（状态）。 （但随后我需要编写一些代码来创建“标签”，但这一点也不难，只需将它们作为具有绝对位置的视图放在底部即可）

b) 在每个屏幕上，读取当前时间，以便当您通过“导航”切换屏幕时，将此时间参数传递到下一个屏幕

c) 当新屏幕到达时，我使用了几行代码（在 componentDidUpdate 和 componentDidMount 中）来比较从上一个屏幕经过的时间到当前时间，如果它们不同，那么我将触发一次更新一次需要更新的功能。

希望以上内容能给不想花额外时间学习/使用 Redux 的开发人员一些见解。

享受....

Answer 3

有两种共享状态。

1. 保持屏幕上的部分状态发生变化，例如下钻视图以查看详细信息。 您不需要更改子集屏幕上的状态。 为了解决这个问题，将需要的数据作为参数发送并作为道具使用。 onPress={() => navigate('OtherScreen', this.state)}
2. 您需要更改其他屏幕上的状态，例如购买屏幕上的多屏道具。 这样你就需要使用Context或Redux （新的 redux-toolkit 是当前的标准，它比redux / react-redux容易得多）。

---

将 redux-cli 与导航一起使用时，请确保所有路由都在<Provider> ，以便您可以全局调用它。

初始化存储：

return (
  <NavigationContainer>
    <Provider store={store}>
      <LoadingActivity />
      <Routes />
    </Provider>
  </NavigationContainer>
);