在mobx store中更改后更新选项卡导航器上的徽章
在mobx store中更改后更新选项卡导航器上的徽章
提问于 2019-03-08 01:16:18
每次更新存储值时，我们都会尝试更新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));回答 3
Stack Overflow用户
回答已采纳
发布于 2019-06-10 18:06:21
我最终使用的是导航参数而不是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});
};Stack Overflow用户
发布于 2019-08-07 17:40:55
您还可以使用React Native...中的DeviceEventEmitter更新通知选项卡中的徽章。您只需要在通知点击时发出，然后在工卡组件类中使用addListener来更新工卡中的计数。
在通知类中：
DeviceEventEmitter.emit('updateBadgeCount', {count:value})在工卡组件类中：
DeviceEventEmitter.addListener('updateBadgeCount', this.updateBadgeCount.bind(this))
updateBadgeCount(c) {
notificationCount = c.count
this.forceUpdate()
}Stack Overflow用户
发布于 2019-08-07 15:23:11
您还可以使用React Native中的DeviceEventEmitter更新通知选项卡中的徽章。您只需要在通知点击时发出，然后在工卡组件类中使用addListener来更新工卡中的计数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55049484
复制相关文章
相似问题