Javascript 如何使用选项卡导航器而不是堆栈导航器向管线传递参数

我正在使用react导航库，特别是

CreateBoottomTabNavigator

网站上的文档解释了如何使用堆栈导航器在路由之间传递参数，但我使用的是选项卡导航器，我找不到任何跳转到我身上的内容来解释如何在选项卡导航设置中传递参数

App.js中我的选项卡导航器是

const BottomTabMenu = createBottomTabNavigator (
  {
    WatchList: { screen: WatchListScreen },
    Alerts: { screen: AlertsScreen },
    Analytics: { screen: AnalyticsScreen },
    Settings: { screen: SettingsScreen },
  },
  {
    initialRouteName: 'WatchList',
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'WatchList') { iconName = 'md-list'; }  
        if (routeName === 'Alerts') { iconName = 'md-alert'; }  
        if (routeName === 'Analytics') { iconName = 'md-analytics'; }  
        if (routeName === 'Settings') { iconName = 'md-settings'; }

        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
  }
);
const AppContainer = createAppContainer(BottomTabMenu);

ALERTSSCREEN.JS

export default class AlertsScreen extends React.Component {

    render() {
        //according to the docs, this is how to receive in the props
        const { navigation } = this.props;
        const jsonWatchList = navigation.getParam('jsonWatchList', '[]');

        return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>blah blah blah</Text>
        </View>
        );
    }
}

---

唯一的问题是我不知道它应该放在哪里。

它在您的链接（）中有很好的记录。 它解释了如何在路由之间传递参数。无论您使用的是

stackNavigator

还是

createBottomTabNavigator

按您希望的方式传递参数：

this.props.navigation.navigate（'jsonWatchList'{
jsonWatchList:[此处有大量数据]，
});

在你的另一个屏幕上，让他们像：

const data=this.props.navigation.getParam（'jsonWatchList'）
它去哪里了？在stack navigator示例中，它位于更改路由的按钮内。选项卡导航不使用按钮您可以在任何地方进行导航。假设您在屏幕A上，并且希望使用一些参数进入屏幕B，它将类似于
this.props.navigation.navigate（'screenB'，{data:YourData}）
我想在按下tab navigator时执行此操作，但app.js中存在的代码不是watchlist.js。奇怪的是，在任何情况下都要传递相同的参数。你不能在适当的屏幕上获取你需要的数据吗？如果您想真正做到这一点，您可以考虑创建Tabar组件并将其传递给<代码> CurATE ButoTabNavigase，用道具代码> TabBar组件 > OK，我明白我看到的唯一方法是，当您在 WaveListSuths中拥有“代码>导航”时，必须设置参数。{jsonWatchList:[这里有很多数据]}；
您不必在某个地方捕捉一个
onPress
来设置参数。您可以在获得所需数据后立即进行设置。然后，当您导航时，就可以获得它们。
export default class AlertsScreen extends React.Component {

    render() {
        //according to the docs, this is how to receive in the props
        const { navigation } = this.props;
        const jsonWatchList = navigation.getParam('jsonWatchList', '[]');

        return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>blah blah blah</Text>
        </View>
        );
    }
}

this.props.navigation.navigate('Alerts', {
              jsonWatchList: [lots of data here],
            });