Как передать реквизит в функцию в BottomTabNavigator - PullRequest
Новая
       36

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

0 голосов
/ 09 октября 2018

Я немного искал в 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},
        }
    });

Anyпомощь очень ценится, я схожу с ума по этому поводу.Я пробовал закомментированный раздел выше, и с этим он выдает jumpToIndex is not a function, а другой вариант не имеет значений хранилища избыточных значений.

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

1 Ответ

0 голосов
/ 10 октября 2018

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

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

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

...