React Native如何修改createMaterialTopTabNavigator激活顶部Tab的指示器颜色

你代码中通过tabBarIndicatorStyle配置指示器颜色的思路是正确的，如果配置后未生效，可按照以下步骤处理：

• 确认依赖版本
  你需要保证当前安装的@react-navigation/material-top-tabs为v6及以上稳定版本，该版本对tabBarIndicatorStyle属性的支持最统一。如果是更低版本，可补充自定义指示器的配置：

import {Image, View, Text} from 'react-native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import StudyingScreen from './StudyingScreen';
import CollectionScreen from './CollectionScreen';

const Tab = createMaterialTopTabNavigator();

const MyCourses = () => {
  return (
    <View style={{flex: 1, backgroundColor: 'white'}}>
      <Text style={{fontSize: 20, marginLeft: 15, marginBottom: 15}}>
        My Courses
      </Text>
      <Tab.Navigator
        screenOptions={{
          // 基础指示器样式配置
          tabBarIndicatorStyle: {
            backgroundColor: 'red',
            // 可额外调整高度、圆角匹配设计效果
            height: 3,
            borderRadius: 2
          },
          // 低版本兼容：自定义指示器组件
          tabBarIndicator: ({width}) => (
            <View style={{
              width,
              height: 3,
              backgroundColor: 'red',
              borderRadius: 2
            }} />
          ),
          // 可同步调整标签文字激活态颜色，和指示器匹配
          tabBarActiveTintColor: 'red',
          tabBarInactiveTintColor: '#666'
        }}>
        <Tab.Screen name="STUDYING" component={StudyingScreen} />
        <Tab.Screen name="COLLECTION" component={CollectionScreen} />
      </Tab.Navigator>
    </View>
  );
};

export default MyCourses;

• 处理全局样式覆盖
  如果项目中配置了全局导航主题，可能会覆盖当前页面的tab样式，可在当前导航器内单独指定主题覆盖全局配置：

// 引入默认主题
import { DefaultTheme } from '@react-navigation/native';

// 自定义主题，修改主色为红色
const customTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'red',
  },
};

// 给Tab.Navigator添加theme属性
<Tab.Navigator
  theme={customTheme}
  // 其他原有配置保持不变
>

• 清空缓存重启项目
  修改完成后执行npx react-native start --reset-cache清空缓存，再重新编译运行项目，避免缓存导致样式不生效。

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