如何在 TabNavigator 中以原生方式将数据从一个屏幕传递到另一个屏幕答案

【问题标题】：How to pass data from one screen to another inside TabNavigator in react native如何在 TabNavigator 中以原生方式将数据从一个屏幕传递到另一个屏幕
【发布时间】：2019-03-21 14:02:13
【问题描述】：

大家好，我正在使用 react-navigation v3 进行导航。我创建了一个名为 TourPackagesTab 的选项卡导航器。它由 2 个屏幕组成，InternationalToursScreen 和 DomesticToursScreen。

我在 InternationalToursScreen 中获取了一些数据。获取的数据也将在 DomesticToursScreen 中使用。如何在 tabNavigator 中将获取的数据传递给 DomesticToursScreen？

【问题讨论】：

你可以通过navigation.setParams() navigation.getParam()来设置和获取数据

标签： react-native tabs react-navigation react-native-navigation

【解决方案1】：

您好，您可以通过参数通过onPress 事件发送数据，例如：

  onPress={() => {
    this.props.navigation.navigate('Screen2', {
      data1: item.data1,
      data2: item.data2,
    });
  }}

然后在Screen2 上您可以这样访问它：

const data = this.props.navigation.state.params;
<Text>{data.data1}</Text>

TabNavigators 也有一个onPress 事件，您可以使用它来执行功能，查看更多here

【讨论】：

你好 Sara，我在屏幕 1 中没有任何按钮。那么现在我该如何执行这个 onpress 功能并传递数据？
嗨@LogeshSelva——你是怎么进入第二个屏幕的？听起来你可能需要在这种情况下使用 redux；获取第一个屏幕的数据后，您可以将其放入存储中，以便在第二个屏幕中访问它。
你好 Sara，感谢 cmets，顺便说一句，我只是向右滑动进入下一个选项卡，如何将数据存储并使用 redux 在第二个屏幕中访问它？如果你分享一些代码会很棒，因为在 redux 中没有关于上述内容的明确文档。请考虑和帮助！
嗨@LogeshSelva 所以它会是这样的，一旦你收到你在Tab1上获取的数据，你就会通过一个动作this.props.addData将它添加到你的Redux存储中，一旦你到达Tab2 你可以读取像this.props.addedData这样的数据——如果你想了解更多关于如何设置Redux的信息：redux.js.org/introduction/getting-started然后从商店读取，使用react-redux：react-redux.js.org/using-react-redux/connect-mapstate

【解决方案2】：

你可以这样发送数据：

    onPress={() => {
    this.props.navigation.navigate('Screen2', {
      data1: item.data1,
      data2: item.data2,
    });
  }}

在下一个屏幕上你必须这样做：

const data1 = this.props.navigation.getParam('data1');
const data2 = this.props.navigation.getParam('data2');

【讨论】：