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},

如何只添加一个小圆点以响应本土化底部标签导航器图标-徽章

1 个答案: