1

我在 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 存储值。

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

4

1 回答 1

0

“每次我切换标签时，我都需要调用 api 来获取最新信息。”

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

react-navigation：检测屏幕何时激活/出现/聚焦/模糊

于 2018-10-10T03:45:53.770 回答