Как передать реквизит функции в BottomTabNavigator

Я довольно много искал в SO и не нашел рабочего решения моей проблемы,

Постановка проблемы: у меня есть BottomTabNavigator с 5 вкладками. Каждый раз, когда я переключаю вкладку, мне нужно сделать вызов API, чтобы получить последнюю информацию. И для получения последней информации мне нужно иметь значения хранилища избыточности, которые мне нужно использовать для вызова API. Итак, как мне сделать эти значения хранилища избыточности доступными в вызове функции, который я делаю на 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, а другой вариант не имеет значений хранилища избыточности.

Пожалуйста помоги. :( Спасибо, Викрам


react-native react-redux react-navigation react-native-navigation react-native-tabnavigator
person Vikram Mahishi    schedule 09.10.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

«Каждый раз, когда я переключаю вкладку, мне нужно сделать вызов API, чтобы получить последнюю информацию».

Вы можете обнаружить willFocus/didFocus событие реакции-навигации, а затем получить API

react-navigation: определить, когда экран активировано/появляется/фокус/размытие

person tuledev    schedule 10.10.2018
comment
Идеальный! Это прекрасно работает, но я не понял, в чем дело с subs. Что это такое и как работает? Не могли бы вы объяснить? - person Vikram Mahishi; 10.10.2018
comment
@VikramMahishi Если вы создаете слушателя, вы должны его удалить. subs - это просто ссылка. Он указывает на слушателей this.props.navigation.addListener . Таким образом, вы можете удалить прослушиватели, когда они вам больше не нужны, в этой ситуации это компонент unmount. - person tuledev; 10.10.2018
comment
Спасибо большое. И я считаю, что это относится только к панели вкладок, поскольку я вижу willFocus/didFocus. Этот подход не имел бы большого смысла, когда дело доходит до передачи реквизита на экран, загруженный из компонента ящика. - person Vikram Mahishi; 10.10.2018