Question

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

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

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

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

是否存在用于在本机中全局共享数据的标准模式？

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

Answer 1

我解决该问题的经验是：

a）不要使用Tab-view模板（或类似模板），该模板不允许您在导航功能中设置参数。这样，您可以在所有屏幕上传递所需的参数（状态）。（但是然后我需要编写一些代码来创建“标签”，但这一点也不难，只需将它们作为一个视图放在底部，并放在绝对位置即可）

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

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

希望以上内容将为那些不想花更多时间学习/使用Redux的开发人员提供一些见识。

享受。...

Answer 2

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

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

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

Answer 3

有两种共享状态。

保持屏幕上的部分状态发生变化，例如用于查看详细信息的向下钻取视图。您不需要更改子集屏幕上的状态。为了解决这个问题，将需要的数据作为参数发送并作为道具使用。 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 个答案:

初始化存储：