如何只添加一个小点来响应导航底部选项卡导航器图标 - 徽章

Question

我正在尝试在底部选项卡导航器中的活动图标顶部实现通知点。这是我的代码：

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 做到这一点？还有其他想法吗？

Answer 1

有点晚了，但这会奏效：

tabBarBadgeStyle: { backgroundColor: 'blue', height: 12, minWidth: 12, borderRadius: 6},