如何移除@react-navigation/material-bottom-tabs中激活按钮的背景色

你可以通过配置导航器的screenOptions属性直接解决这个问题，具体有两种常用方式：

• 直接设置激活标签的背景为透明：
  在创建Tab导航器时，给screenOptions添加tabBarActiveBackgroundColor: 'transparent'，这会直接覆盖激活状态下的按钮背景色。

• 如果上述方法未生效，可配置指示器样式：
  针对底部标签的激活指示器，设置activeIndicatorStyle将其背景设为透明，彻底移除默认的高亮背景。

完整代码示例：

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

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveBackgroundColor: 'transparent',
        activeIndicatorStyle: {
          backgroundColor: 'transparent',
        },
      }}
    >
      {/* 这里添加你的页面路由配置 */}
    </Tab.Navigator>
  );
}

如果依然存在样式冲突，你可以自定义tabBarButton组件，完全控制按钮的激活状态样式：

import { TouchableOpacity } from 'react-native';

// 在Tab.Navigator的screenOptions中添加
screenOptions={{
  tabBarButton: (props) => (
    <TouchableOpacity
      {...props}
      style={{
        ...props.style,
        backgroundColor: props.accessibilityState.selected ? 'transparent' : 'transparent',
      }}
    >
      {props.children}
    </TouchableOpacity>
  ),
}}

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