如何为React Navigation的Material Top Tabs Navigator 6.x设置活跃/非活跃标签不同指示器颜色

我正在使用React Navigation的Material Top Tabs Navigator，基础代码如下：

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

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Chat" component={ChatScreen} />
      <Tab.Screen name="Contacts" component={ContactsScreen} />
      <Tab.Screen name="Albums" component={AlbumsScreen} />
    </Tab.Navigator>
  );
}

默认情况下，只有活跃标签会显示指示器：

我需要让所有标签（包括非活跃标签）都显示指示器，且活跃与非活跃标签的指示器颜色不同，目标效果如下：

目前我已经知道可以通过tabBarIndicatorStyle修改活跃标签的指示器颜色，但不知道如何设置非活跃标签的指示器样式。

要实现这个需求，需要自定义TabBar组件，因为默认TabBar仅提供活跃指示器的配置项，具体实现步骤如下：

1. 导入必要的组件与钩子

import { View, Text, StyleSheet } from 'react-native';
import { useNavigationState } from '@react-navigation/native';

2. 编写自定义TabBar组件

const CustomTabBar = ({ state, descriptors, navigation }) => {
  const activeIndex = state.index;

  return (
    <View style={styles.tabBarContainer}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label = options.tabBarLabel ?? route.name;
        const isActive = index === activeIndex;

        return (
          <View key={route.key} style={styles.tabItem}>
            <Text style={[styles.tabText, isActive ? styles.activeText : styles.inactiveText]}>
              {label}
            </Text>
            {/* 自定义指示器 */}
            <View 
              style={[
                styles.tabIndicator, 
                isActive ? styles.activeIndicator : styles.inactiveIndicator
              ]} 
            />
          </View>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  tabBarContainer: {
    flexDirection: 'row',
    backgroundColor: '#1e1e2f', // 替换为你的TabBar背景色
  },
  tabItem: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 12,
  },
  tabText: {
    fontSize: 14,
    fontWeight: '500',
  },
  activeText: {
    color: '#ffffff', // 活跃标签文字颜色
  },
  inactiveText: {
    color: '#888888', // 非活跃标签文字颜色
  },
  tabIndicator: {
    height: 2,
    width: '60%',
    marginTop: 8,
    borderRadius: 1,
  },
  activeIndicator: {
    backgroundColor: '#ffffff', // 活跃指示器颜色
  },
  inactiveIndicator: {
    backgroundColor: '#444444', // 非活跃指示器颜色
  },
});

3. 在Tab.Navigator中使用自定义TabBar

function MyTabs() {
  return (
    <Tab.Navigator tabBar={(props) => <CustomTabBar {...props} />}>
      <Tab.Screen name="Chat" component={ChatScreen} />
      <Tab.Screen name="Contacts" component={ContactsScreen} />
      <Tab.Screen name="Albums" component={AlbumsScreen} />
    </Tab.Navigator>
  );
}

说明 #

• 通过useNavigationState获取当前活跃标签索引，判断每个标签的活跃状态
• 为每个标签单独添加指示器视图，根据活跃状态切换样式
• 可通过修改styles中的属性，自定义TabBar背景、文字样式、指示器尺寸及颜色等

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