React Native问题：无法修改Material Bottom Navigator默认选中颜色

• 针对@react-navigation/material-bottom-tabs，修改选中Tab的指示器颜色，需在Navigator配置中添加tabBarIndicatorStyle：

  import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
  
  const Tab = createMaterialBottomTabNavigator();
  
  function MyTabs() {
    return (
      <Tab.Navigator
        screenOptions={{
          tabBarActiveTintColor: '#FF5722', // 选中图标/文字颜色
          tabBarInactiveTintColor: '#9E9E9E', // 未选中图标/文字颜色
        }}
        barStyle={{ backgroundColor: '#FFFFFF' }} // Tab栏背景色
        tabBarIndicatorStyle={{ backgroundColor: '#FF5722' }} // 选中指示器颜色
      >
        {/* 你的Tab页面配置 */}
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    );
  }
  

• 若你用了自定义Tab图标/文字组件，需根据focused状态手动切换颜色：

  function CustomTabIcon({ focused }) {
    return (
      <Ionicons
        name={focused ? 'home' : 'home-outline'}
        size={24}
        color={focused ? '#FF5722' : '#9E9E9E'}
      />
    );
  }
  
  // 在Screen的options中引用
  <Tab.Screen
    name="Home"
    component={HomeScreen}
    options={{ tabBarIcon: (props) => <CustomTabIcon {...props} /> }}
  />
  

• 排查样式冲突：检查全局CSS、父组件样式是否覆盖了Tab栏的默认样式，可临时给指示器样式加!important验证是否是冲突问题（后续建议定位并移除冲突样式）
• 确认包版本：不同版本的material-bottom-tabs配置项可能有差异，若上述配置不生效，检查package.json中@react-navigation/material-bottom-tabs和react-navigation的版本，确保适配当前版本的官方配置

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