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

Question

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

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

正如你所看到的，我可以使用相同的HomeScreen组件与不同的道具，我可以传递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",
        }
    },

Answer 1

我刚刚发现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')来获取Param。