我使用createBottomTabNavigator()
创建了BottomNav。
然后在BottomNav
中创建了静态徽章。但我想制作一个动态徽章。我将徽章编号保存到Redux Store
,但不知道如何使用它们。
这是显示徽章的代码的一部分。
...
const getTabBarIcon = (navigation, focused, tintColor) => {
const { routeName } = navigation.state;
let iconName = null;
let badgeCount = null;
if (routeName === 'Alarm') {
iconName = 'alarm';
badgeCount = 27;
} else if (routeName === 'Messages') {
iconName = 'message';
badgeCount = 11;
} else if (routeName === 'Summary') {
iconName = `matrix`;
badgeCount = 55;
}
return (
<View style={styles.tabIcon}>
<Badge color="red"><Text>{badgeCount}</Text></Badge>
<Icon type="MaterialCommunityIcons" name={iconName} />
</View>
);
};
...
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => getTabBarIcon(navigation, focused, tintColor),
}), // set the tabBarIcon in the navigationOptions
...