javascript - mobx 商店更改后更新选项卡导航器上的徽章

Question

每次更新商店值时，我们都会尝试更新 react 导航 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));

Answer 1

我最终使用了导航参数而不是 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});
};