如何在 react-Native 中使用 Tab Navigation 传递数据？（反应导航）？答案

【问题标题】：How can I pass data using Tab Navigation in react-Native? (React Navigation)?如何在 react-Native 中使用 Tab Navigation 传递数据？（反应导航）？
【发布时间】：2018-06-22 11:02:08
【问题描述】：

这是我的 Main.js 文件，其中包含我的“Tab”组件

Main.js

    <View>
     </Tab>
    </View>

这是我的 Tab.js 文件：

const mainTab = TabNavigator(
{
TabItem1: {
  screen: gameTab,
  navigationOptions: ({ navigation }) => ({
    tabBarLabel: "Tab1",
  })
},

TabItem2: {
  screen: Abc,
  navigationOptions: ({ navigation }) => ({
    tabBarLabel: "Tab2",
  })
},

TabItem3: {
  screen: Abc,
  navigationOptions: ({ navigation }) => ({
    tabBarLabel: "Tab3",
  })
}
},
 {
initialRouteName: "TabItem1",
tabBarComponent: TabBarBottom,
tabBarPosition: "bottom",
animationEnabled: true,
tabBarOptions: Platform.OS === "ios" ? iosTabBarOption : 
androidTabBarOption
 }
);

export default mainTab;

这是我的游戏标签：

const gameTab = TabNavigator({
t1: { screen: mainlist, navigationOptions: { title : 'tab1', header:null}},
t2: { screen: Abc,      navigationOptions: { title : 'tab2', header:null}},
t3: { screen: Abc,      navigationOptions: { title : 'tab3', header:null}},
t4: { screen: Abc,      navigationOptions: { title : 'tab4', header:null}},
t5: { screen: Abc,      navigationOptions: { title : 'tab5', header:null}},
},{
tabBarComponent: TabBarTop,
tabBarPosition: 'top',
animationEnabled: true,
swipeEnabled: false,
lazy: false,
tabBarOptions: Platform.OS === 'ios' ? iosGameTabOption : 
androidGameTabOption,
});

export default gameTab;

最后，这是我的 mainlist.js：

....

let arr = [[1,2,3], [2,3,4], [3,4,5]];

....

所以我的问题是：我在 mainlist.js 中有一个数组，我想将它传递回我的 Main.js。我该怎么做？

我知道我可以使用 ScreenProps 将数据从 Main.js 发送到 mainlist.js，但我不知道如何发回。

提前致谢！！！！

【问题讨论】：

标签： react-native react-navigation tabnavigator

【解决方案1】：

由于您的数据是静态的或不会根据打开的选项卡而变化，您所要做的就是从mainlist.js 导出数组。

// mainlist.js
let arr = [[1,2,3], [2,3,4], [3,4,5]];

export default { arr };

然后将该数组导入到您需要的每个选项卡中。

// Abc tabs components. Abc.js
import { arr } from "./mainlist.js";

并根据您的需要使用数据。您还可以使用 redux 并使用您的数据维护全局树。

如果您决定动态更改选项卡，您可以将参数传递到每个屏幕。

欲了解更多信息：https://reactnavigation.org/docs/en/params.html

【讨论】：