在 mobx 商店更改后更新标签导航器上的徽章

Question

每次我们更新 store 值时，我们都会尝试在 react-navigation 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});
};

Answer 2

您还可以使用 React Native 中的 DeviceEventEmitter 在 Notification 选项卡中更新徽章...您只需要在点击通知时发出，然后在 Badge 组件类中添加Listener 即可更新徽章中的计数。

在通知类中：

DeviceEventEmitter.emit('updateBadgeCount',  {count:value})

在徽章组件类中：

DeviceEventEmitter.addListener('updateBadgeCount', this.updateBadgeCount.bind(this))

updateBadgeCount(c) {
 
   notificationCount = c.count

   this.forceUpdate() 

}

Answer 3

您还可以使用 React Native 中的 DeviceEventEmitter 在 Notification 选项卡中更新徽章。您只需在点击通知时发出，然后在 Badge 组件类中添加Listener 即可更新徽章中的计数。