移除@react-navigation/material-bottom-tabs激活项胶囊背景及过大内边距

你遇到的问题是@react-navigation/material-bottom-tabs的默认样式导致的：激活状态的图标会自带圆形背景，同时图标容器有默认的较大内边距。以下是具体的修复方案：

核心修改点 #

• 移除激活图标背景：在Tab.Navigator中添加tabBarActiveBackgroundColor属性，设置为透明或与导航栏背景一致的颜色
• 调整图标内边距：通过tabBarItemStyle控制每个tab项的内边距，缩小默认的上下padding
• 移除无效配置：tabBarOptions是其他Tab组件（如BottomTabNavigator）的配置，在material-bottom-tabs中不生效，直接删掉即可

修改后的完整代码 #

import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import { ColorCodes } from "../helper/palette";
import ViewHome from "../views/home";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";

const Tab = createMaterialBottomTabNavigator();

export default function RouteTab() {
  return (
    <Tab.Navigator
      initialRouteName="ViewHome"
      barStyle={{
        backgroundColor: ColorCodes.backgroundDeepest,
      }}
      labeled={false}
      activeColor={ColorCodes.activeColor}
      inactiveColor={ColorCodes.inactiveColor}
      // 移除激活图标背景
      tabBarActiveBackgroundColor="transparent"
      // 调整tab项的内边距，按需修改数值
      tabBarItemStyle={{ paddingVertical: 2 }}
    >
      <Tab.Screen
        name="ViewHome"
        component={ViewHome}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="qwwqdqwd"
        component={ViewHome}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

额外优化（可选） #

如果还需要更精细控制图标容器样式，可以在tabBarIcon外层包裹一个View自定义样式：

tabBarIcon: ({ color }) => (
  <View style={{ padding: 4 }}>
    <MaterialCommunityIcons name="home" color={color} size={26} />
  </View>
)

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