如何在反应原生屏幕之间共享状态？答案

【问题标题】：How do I share state between react native screens?如何在反应原生屏幕之间共享状态？
【发布时间】：2018-07-02 15:52:29
【问题描述】：

我正在尝试使用 react native 和 react 导航构建一个应用，这样在一个屏幕上更改某些内容也会在另一个屏幕上更改它。

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

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

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

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

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

【问题讨论】：

我在另一个文件中创建全局变量并将其导入使用。
Redux 是正确的解决方案，但如果你想以艰难的方式做到这一点，你总是可以将状态作为道具传递。
我遇到了同样的问题。似乎 react-navigation 似乎不鼓励使用带有 react-navigation 的 redux。似乎一个不错的解决方案可能是允许屏幕访问当前路线并在其上查询方法，或者让路线将额外信息添加到可以从任何地方访问的参数中

标签： reactjs react-native global-variables react-navigation

【解决方案1】：

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

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

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

【讨论】：

我试过了！我昨天花了 4 个小时试图让 redux 工作，我阅读了所有的文档和教程，但我不知道如何让它在多个屏幕上可用。 react-navigation 似乎旨在防止这种情况发生
同时使用 react-navigation 和 Redux 没有问题
你需要在导航前添加你的redux store。它会在代码中很好地工作

【解决方案2】：

有两种共享状态。

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

使用带导航的redux-cli时，确保所有路由都在<Provider>内，这样就可以全局调用了。

初始化存储：

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

【讨论】：

【解决方案3】：

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

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

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

c) 当新屏幕到来时，我已经使用了几行代码（在componentDidUpdate和componentDidMount中）来比较从前一个屏幕到当前时间的时间，如果它们不同，那么我将触发更新ONCE 对所有需要更新的函数。

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

享受....

【讨论】：