如何使用选项卡导航器而不是堆栈导航器将参数传递给路由答案

【问题标题】：How to pass parameters to routes using a Tab Navigator NOT stack navigator如何使用选项卡导航器而不是堆栈导航器将参数传递给路由
【发布时间】：2019-08-23 13:47:08
【问题描述】：

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

https://reactnavigation.org/docs/en/params.html 的文档解释了如何使用堆栈导航器在路由之间传递参数，但我使用的是选项卡导航器，但我找不到任何可以解释如何在选项卡导航设置中执行此操作的内容

我在 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);

watchList 路由包含一个名为 symbols 的 json 文件，我想将它传递给 alertsScreen.js 中的 alerts 路由

export default class WatchListScreen extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            symbols: [],
        }
    }  
LOTS OF OTHER STUFF

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>
        );
    }
}

根据文档，我需要传递数据的行是这样的

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

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

【问题讨论】：

标签： javascript node.js react-native react-navigation expo

【解决方案1】：

在您的链接 (https://reactnavigation.org/docs/en/params.html) 中有详细记录。它解释了如何在路由之间传递参数。不管你是使用stackNavigator 还是createBottomTabNavigator

按照您的意愿传递参数：

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

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

const data = this.props.navigation.getParam('jsonWatchList');

【讨论】：

它去哪儿了？在堆栈导航器示例中，它位于更改路线的按钮内。标签导航不使用按钮
您可以在任何您想要的地方进行操作。假设您在屏幕 A 上，并且您想使用一些参数转到屏幕 B，它将类似于 this.props.navigation.navigate('screenB', { data: YourData });
我想在按下选项卡导航器时执行此操作，但该代码存在于 app.js 而不是 watchlist.js 中
在任何情况下都想传递相同的参数很奇怪。你不能在适当的屏幕上获取你需要的数据吗？如果你真的想这样做，你可以考虑创建你的 tabBar 组件并将其传递给 createBottomTabNavigator 并使用 prop tabBarComponent
好的，我明白了我看到的唯一方法是，当您将参数放在WatchListScreen 中时，您必须设置它们，例如navigation.setParams({ jsonWatchList: [lots of data here] }); 您不必尝试捕捉onPress 在某处设置参数。您可以在获得所需数据后立即进行设置。然后，当您导航时，您可以获得它们。