如何移除React底部标签导航中活跃图标的背景色（紫色tint）？

针对你使用的@react-navigation/material-bottom-tabs: ^6.2.11和@react-navigation/native: ^6.1.2版本，移除活跃标签的紫色背景色可通过以下方式解决：

• v6版本中tabBarOptions已废弃，需改用screenOptions配置项
• 可通过隐藏活跃指示器或设置透明背景两种方式实现需求

方案一：直接隐藏活跃状态背景指示器 #

在创建底部标签导航时，添加screenOptions配置：

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveIndicatorStyle: {
          display: 'none', // 隐藏默认的背景指示器
        },
      }}
      // 保留你原有的其他配置（如初始路由、标签栏样式等）
    >
      {/* 你的标签页面组件 */}
    </Tab.Navigator>
  );
}

方案二：设置活跃标签背景为透明 #

如果需要保留图标/文字的颜色自定义，仅移除背景色，可使用该配置：

<Tab.Navigator
  screenOptions={{
    tabBarActiveBackgroundColor: 'transparent',
    // 可同时自定义活跃状态的图标/文字颜色
    tabBarActiveTintColor: '#your-preferred-color',
  }}
>
  {/* 你的标签页面组件 */}
</Tab.Navigator>

补充提示 #

如果你的标签图标是自定义的tabBarIcon组件，请检查组件内部是否额外设置了背景样式，避免冲突。v6版本的Material Bottom Tabs所有样式配置均需放在screenOptions或tabBarStyle中，不要再使用已废弃的tabBarOptions。

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