React Native - 像 Material Bottom Navigator 一样向 Material Top Navigator 显示标签栏徽章

Question

Material Bottom Tab Navigator 可以选择TabBarBadge 在标签图标（如通知）上显示一个小徽章（字符串或数字）。 但是在Top Tab Bar Navigator中，这个选项是不存在的。

在顶部标签栏导航器中有一个名为TabBarPosition 的选项可以设置标签栏的位置在顶部或底部。 但在底部选项卡导航器中，此选项不存在...

所以我正在寻找一种在我的 Material 顶部标签栏上添加徽章的方法，或者将我的 Material 底部标签栏的位置设置为顶部并能够使用 TabBarBadge。

谢谢！

Answer 1

我也遇到过这个问题。这个属性真的到现在都没有（虽然github上的issue开了差不多一年了），所以我找到的唯一解决方案就是尝试重新发明轮子。

所以我的解决方案是创建一个自定义组件。

import {MaterialTopTabBarProps} from '@react-navigation/material-top-tabs';

const CustomTabBar:React.FC<MaterialTopTabBarProps> = ({state, descriptors, navigation}) => {
    return (
        <View style={{ flexDirection: 'row', paddingTop: 20, backgroundColor: 'rgb(0,0,0)' }}>
          {state.routes.map((route, index) => {
            const 
                {options} = descriptors[route.key],
                isFocused = state.index === index,
                label =
                    options.tabBarLabel !== undefined
                    ? options.tabBarLabel
                    : options.title !== undefined
                    ? options.title
                    : route.name,
                badge = '1' // You can get this value using your api or something

            return (
                <Text
                    style={isFocused ? {opacity: 1, color: 'rgb(255,255,255)'} : {opacity: 0.5, color: 'rgb(255,255,255)'}}
                    onPress={() => {
                        navigation.navigate(route.name);
                    }}
                >
                    {label}
                    {badge ? <Text>{badge}</Text> : null}
                </Text>
            );
          })}
        </View>
      );
}
  
const Tab = createMaterialTopTabNavigator();

export const MainPage = ({navigation}: MainPageProps) =>{
    return (
        <Tab.Navigator
            tabBar = {(props:MaterialTopTabBarProps) => {
                return(
                    <CustomTabBar {...props} />
                );
            }}
        >
            <Tab.Screen name="Chats" component={ChatsScreen}/>
            <Tab.Screen name="Albums" component={AlbumsScreen} />
        </Tab.Navigator>
    );
}