Javascript 如何将不同的道具传递到导航器中的不同屏幕？

我正在尝试创建一个带有不同类别过滤器的新闻应用程序。为了做到这一点，我必须将道具传递到导航器中的不同屏幕，以便组件可以将道具用于fetchapi。 例如：

export default createMaterialTopTabNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions:{
            tabBarLabel: "Home",
        },
        props: {id: 1}
    },
    BeautyScreen: {
        screen: HomeScreen,
        navigationOptions:{
            tabBarLabel: "Beauty tips",
        },
        props: {id: 2}
    },
    BusinessScreen: {
        screen: HomeScreen,
        navigationOptions:{
            tabBarLabel: "Business related",
        },
        props: {id: 3}
    },
    CarsScreen: {
        screen: HomeScreen,
        navigationOptions:{
            tabBarLabel: "Cars related",
        },
        props: {id: 4}
    },
)}

正如您所看到的，我可以使用相同的

主屏幕

组件和不同的道具，我可以传入api，例如：

fetch（“https://some-api.com/?category=“+navigations.props.id）

这就是我现在所拥有的，我必须为不同的屏幕创建不同的组件，基本上相同的组件具有不同的api

export default createMaterialTopTabNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions:{
            tabBarLabel: "Home",
        }
    },
    BeautyScreen: {
        screen: BeautyScreen,
        navigationOptions:{
            tabBarLabel: "Beauty tips",
        }
    },
    BusinessScreen: {
        screen: BusinessScreen,
        navigationOptions:{
            tabBarLabel: "Business related",
        }
    },
    CarsScreen: {
        screen: CarsScreen,
        navigationOptions:{
            tabBarLabel: "Cars related",
        }
    },

---

我刚刚发现react navigation v3支持此功能

BeautyScreen: {
    screen: OtherCategoriesScreens,
    navigationOptions:{
        tabBarLabel: "Beauty",
    },
    params: {
        categories: [
            {
                name: "Fashion",
                id: 144,
            },
            {
                name: "Make up",
                id: 143,
            },
        ]
    }
},

---

然后您可以在屏幕组件中使用

this.props.navigation.getParam（'categories'）

来获取参数。

我刚刚发现react navigation v3支持此功能

BeautyScreen: {
    screen: OtherCategoriesScreens,
    navigationOptions:{
        tabBarLabel: "Beauty",
    },
    params: {
        categories: [
            {
                name: "Fashion",
                id: 144,
            },
            {
                name: "Make up",
                id: 143,
            },
        ]
    }
},

然后可以在屏幕组件中使用

this.props.navigation.getParam（'categories'）

来获取参数