React Native底部标签栏tabBarBadge不生效问题求助

针对你使用@react-navigation/bottom-tabs v6.4.1时徽章无法显示的问题，可按以下步骤排查修复：

• 修正tabBarBadgeStyle属性
  你当前仅设置了徽章文字颜色color:'red'，但未指定徽章背景色。若标签栏背景色与徽章默认背景色（通常为蓝色）一致，徽章会被遮挡。建议补充背景色设置：

  <Tab.Screen 
      name={'ApprovalTab'} 
      component={ApprovalScreen} 
      options={{
          tabBarBadge: 3,
          tabBarBadgeStyle: {
              color: 'white', // 文字颜色
              backgroundColor: 'red' // 徽章背景色
          }
      }}
  />
  

• 检查是否使用自定义TabBar
  若你的Tab.Navigator配置了tabBar属性自定义底部栏，默认的tabBarBadge和tabBarBadgeStyle不会生效。此时需要在自定义TabBar组件中，手动获取并渲染徽章：

  // 自定义TabBar组件示例
  const CustomTabBar = ({ state, descriptors, navigation }) => {
    return (
      <View style={{ flexDirection: 'row' }}>
        {state.routes.map((route, index) => {
          const { options } = descriptors[route.key];
          const label = options.tabBarLabel ?? route.name;
          const isFocused = state.index === index;
          const badge = options.tabBarBadge;
  
          const onPress = () => {
            const event = navigation.emit({
              type: 'tabPress',
              target: route.key,
              canPreventDefault: true,
            });
  
            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name);
            }
          };
  
          return (
            <TouchableOpacity
              key={route.key}
              onPress={onPress}
              style={{ flex: 1, alignItems: 'center', paddingVertical: 16 }}
            >
              <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>{label}</Text>
              {/* 手动渲染徽章 */}
              {badge && (
                <View style={{
                  position: 'absolute',
                  top: 8,
                  right: 20,
                  backgroundColor: 'red',
                  borderRadius: 10,
                  width: 20,
                  height: 20,
                  justifyContent: 'center',
                  alignItems: 'center'
                }}>
                  <Text style={{ color: 'white', fontSize: 12 }}>{badge}</Text>
                </View>
              )}
            </TouchableOpacity>
          );
        })}
      </View>
    );
  };
  
  // 使用自定义TabBar
  <Tab.Navigator tabBar={(props) => <CustomTabBar {...props} />}>
    {/* 你的Tab.Screen配置 */}
  </Tab.Navigator>
  

• 排查版本兼容性问题
  部分旧版@react-navigation/bottom-tabs存在徽章渲染的小bug，可尝试升级至最新的6.x稳定版：

  npm install @react-navigation/bottom-tabs@latest
  # 或 yarn
  yarn upgrade @react-navigation/bottom-tabs@latest
  

• 确认徽章值有效性
  确保tabBarBadge的值不为假值（如0、null、undefined），这些值会导致徽章自动隐藏。若需显示数字0，可将其转为字符串"0"。

内容的提问来源于stack exchange，提问作者Alihaydar