如何将道具传递给 BottomTabNavigator 中的函数

Question

我在 SO 中搜索了很多，但没有找到解决我的问题的有效方法，

问题陈述：我有带 5 个选项卡的 BottomTabNavigator。每次切换选项卡时，我都需要调用 api 来获取最新信息。为了获取最新信息，我需要有我需要用来进行 api 调用的 redux 存储值。那么我如何使这些 redux 存储值在我在 tabChange 上进行的函数调用中可用？

下面是我的函数，需要在 BottomTabNavigator 之后调用，

    fetchProfile = () => {
        const {selectedPerson, dispatch, actions} = this.props
        let Id = selectedPerson.Id
        let personId = selectedPerson.placeId
        dispatch(actions.getPersonDetails(Id, personId))
    }

    export const Tabs = createBottomTabNavigator({
        Profile: { 
            screen: ProfileConnector,
            navigationOptions: {
                tabBarLabel: 'Profile',
                tabBarIcon: ({tintColor}) => <Icon name="user" size={px2dp(22)} color={tintColor} onPress={() => fetchProfile()}/>,
            },
            // navigationOptions: ({ navigation }) => ({
            //     tabBarOnPress: (tab, jumpToIndex) => {
            //       console.log('onPress:', tab.route);
            //       jumpToIndex(tab.index);
            //     },
            //     tabBarLabel: 'Profile',
            //     tabBarIcon: ({tintColor}) => <Icon name="user" size={px2dp(22)} color={tintColor}/>,
            //   }),
        },
        Inbox: { 
            screen: InboxConnector,
            navigationOptions: {
                tabBarLabel: 'Inbox',
                tabBarIcon: ({tintColor}) => <Icon name="inbox" size={px2dp(22)} color={tintColor}/>,
            },
        },
        Bling: {
            screen: BlingConnector,
            navigationOptions: {
                tabBarLabel: 'Bling',
                tabBarIcon: ({tintColor}) => <Icon name="hand" size={px2dp(22)} color={tintColor}/>,
            },
        },
        Calendar: {
            screen: CalendarConnector,
            navigationOptions: {
                tabBarLabel: 'Calendar',
                tabBarIcon: ({tintColor}) => <Icon name="calendar" size={px2dp(22)} color={tintColor}/>,
            },
        },
        Misc: {
            screen: Misc,
            navigationOptions: {
                tabBarLabel: 'Misc',
                tabBarIcon: ({tintColor}) => <Icon name="bar-graph" size={px2dp(22)} color={tintColor}/>,
            },
        },
    }, {
        initialRouteName: 'Inbox',
        tabBarPosition: 'bottom',
        swipeEnabled: true,
        scrollEnabled: true,
        tabBarOptions: {
            activeTintColor: 'teal',
            inactiveTintColor: '#424949',
            activeBackgroundColor: "white",
            inactiveTintColor: '#424949',
            labelStyle: { fontSize: 14 },
            style : { height : 50},
        }
    });

非常感谢任何帮助，我正在为此而烦恼。我已经尝试了上面注释掉的部分并且它抛出 jumpToIndex is not a function 而另一个选项没有 redux 存储值。

请帮忙。 :( 谢谢，维克拉姆

Answer 1

"Everytime i switch the tab i need to make an api call to fetch latest information."

您可以检测 willFocus/didFocus 反应导航事件，然后获取 api

如何将道具传递给 BottomTabNavigator 中的函数

How to pass props to a function in BottomTabNavigator

react-native

react-redux

react-native-navigation

react-navigation

react-native-tabnavigator