Question

每次更新商店值时，我们都尝试在反应导航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来更新徽章中的计数。

Answer 3

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

在通知类别中： DeviceEventEmitter.emit（'updateBadgeCount'，{count：value}）

在Badge组件类中：

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

updateBadgeCount（c）{

notificationCount = c.count

this.forceUpdate()

}

在Mobx存储中更改后更新标签导航器上的标志

3 个答案: