如何解决如何只添加一个小圆点以响应本土化底部标签导航器图标-徽章
我正在尝试在底部标签导航器中的活动图标上方实现一个通知点。这是我的代码:
const Tab = createBottomTabNavigator();
@inject('store')
@observer
class HoMetabs extends React.Component<HomeProps> {
render() {
return (
<NavigationContainer independent={true} ref={mainNavigationRef}>
<Tab.Navigator
screenoptions={({ route }) => ({
tabBarIcon: ({ focused }) => {
let iconName='question';
if (route.name === 'Home') {
iconName = focused
? 'home'
: 'home-outline';
}
else if (route.name === 'Activity') {
iconName = focused ? 'bell' : 'bell-outline';
}
else if (route.name === 'Search') {
iconName = focused ? 'search-web' : 'magnify';
}
else if (route.name === 'Profile') {
iconName = focused ? 'account' : 'account-outline';
}
// You can return any component that you like here!
return <Icon name={iconName} type='material-community' color='#000000' size={24}/>;
},})}
tabBarOptions={{
activeTintColor: 'black',inactiveTintColor: 'gray',}}
>
<Tab.Screen name="Home" component={YourPostsstack} />
<Tab.Screen name="Activity" component={ActivityStack} options={{tabBarBadge: true}} />
<Tab.Screen name="Search" component={SearchStack} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
</NavigationContainer>
)
}
}
我在reactNavigation文档中看到了'tabBarBadge',但是将其设为空字符串,徽章对于我所需要的来说非常大。我只需要一个小点来表示有待查看的通知。使用bottomTabNavigation还有其他方法吗?还有其他想法吗?
解决方法
有点晚了,但这会奏效:
tabBarBadgeStyle: { backgroundColor: 'blue',height: 12,minWidth: 12,borderRadius: 6},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。