Обновить значок на вкладке навигатора после смены в магазине mobx - PullRequest
Новая
       30

Обновить значок на вкладке навигатора после смены в магазине mobx

2 голосов
/ 07 марта 2019

Мы пытаемся обновить количество значков в реагирующей навигации BottomTabBar каждый раз, когда обновляем значения магазина.Он успешно обновляется, когда мы обновляем корзину при переходе с одной страницы на другую, но если мы пытаемся обновить корзину на той же странице, значок не изменяется, но как только мы нажимаем на другую вкладку, значениеизменено на правильное актуальное значение.Есть ли способ автоматически изменить это значение при обновлении магазина?Поскольку маршрутизатор не является компонентом класса, мы не можем связать его с наблюдателем mobx.

Здесь мы объявляем наш стековый навигатор для вкладок в router.js:

export const Tabs = createBottomTabNavigator({
   'Home': {
        screen: Home,
        navigationOptions: {
            tabBarLabel: 'Home',
            tabBarIcon: ({tintColor}) => (<View><Icon name="home" color={tintColor} type="light" size={22}/></View>),
            header: null,
        },
    },
    'Items': {
        screen: MenuNav,
        navigationOptions: {
            tabBarLabel: 'Menu',
            tabBarIcon: ({tintColor}) => (<View><Icon name="utensils" color={tintColor} type="light" size={22}/><View></View></View>),
            },
    },
    'Cart': {
        screen: Checkout,
        navigationOptions: {
            tabBarLabel: 'My Order',
            tabBarIcon: ({tintColor}) => (
                <View>{store.draft.quantity ?
                    <View>
                        <View style={{position: 'absolute', top: -10, left: -10, backgroundColor: store.theme.primary_button_color, width: 20, height: 20, borderRadius: 50, zIndex: 100,}}>
                            <Text style={{ color: store.theme.primary_button_text_color, position: 'relative', left: 7, top: 4, fontSize: 10}}>{store.draft.quantity}</Text>
                        </View>
                        <Icon name="shopping-bag" color={tintColor} type="light" size={22}/>
                    </View> : <View><Icon name="shopping-bag" color={tintColor} type="light" size={22}/></View>}
                </View>),
            },
    },
    'Info': {
        screen: Info,
        navigationOptions: {
            tabBarLabel: 'Restaurant',
            tabBarIcon: ({tintColor}) => (<View><Icon name="map-marker-smile" color={tintColor} type="light" size={22}/><View></View></View>),
        },
    }
},
    {tabBarComponent: (props) => {
        return (
          <TabBar
            {...props}
          />
        );
      },
        tabBarPosition: 'bottom',
    },
);

Вот как мы визуализируем наши вкладки: 

import React, { Component } from 'react';
import { BottomTabBar } from 'react-navigation-tabs';
import { withNavigation } from 'react-navigation';
import { observer } from 'mobx-react';
import globalScss from "../styles.scss";

class TabBar extends Component {
    render() {
        return (
            <BottomTabBar
                {...this.props}
                activeTintColor={'#898989'}
                inactiveTintColor={'#FFF'}
                style={[{ height: 60, paddingTop: 7 }, globalScss.primary_color]}
            />
        );
    }
}
export default withNavigation(observer(TabBar));

1 Ответ

1 голос
/ 10 июня 2019

В итоге я использовал параметры навигации вместо состояния mobx. 

defaultNavigationOptions: ({navigation}) => ({
tabBarIcon: () => {
            rootStore.setNavigation(navigation);
            const {routeName} = navigation.state;
             if (routeName === 'Tab') {
                const badgeCount = navigation.getParam('badgeCount',0)
                return (
                    <View style={{flexDirection: 'row',alignItems: 'center',justifyContent: 'center'}}>
                        <IconBadge
                            MainElement={
                                <View style={{
                                    width:30,
                                    height:30,
                                    margin:6
                                }}
                                >
                                    <Image
                                        source={require('../../assets/Icons/tab_icon-01.png')}
                                        style={{width: '100%', height: '100%'}}/>
                                </View>
                            }
                            BadgeElement={
                                <Text style={{color:'#FFFFFF'}}>{badgeCount}</Text>
                            }
                            IconBadgeStyle={
                                {
                                    width:20,
                                    height:20,
                                    backgroundColor: '#F20779',
                            }}
                            Hidden={badgeCount === 0}
                        />
                    </View>
                );
            } },
}),

Я установил навигацию в магазине Mobx: 

 setNavigation(navigation) {
     this.navigation = navigation
}

затем я обновляю параметр навигации: 

setBadgeValue =() => {
    if (this.navigation !== null)
    this.navigation.setParams({badgeCount: this.pendingItems.length});
};
...