Как передать разные реквизиты на разные экраны в навигаторе?

Question

Я пытаюсь создать приложение новостей с фильтром разных категорий.Для этого мне нужно передать реквизиты на разные экраны в моем навигаторе, чтобы компонент мог использовать реквизиты для извлечения API.Например:

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).

thisэто то, что у меня есть сейчас, мне нужно создать разные компоненты для разных экранов, для того, что в основном это один и тот же компонент с разными 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

Я только что узнал, что реагирующая навигация v3 поддерживает это

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

И затем вы можете использовать this.props.navigation.getParam('categories') в компоненте экрана, чтобы получить параметр.