如何移除React Navigation Material Bottom Tab Navigator的激活图标背景

当shifting={false}时，Material Bottom Tabs会给激活标签添加默认背景，你可以通过以下两种方式解决：

方法一：直接设置activeBackgroundColor属性 #

这是最简便的方式，在Tab.Navigator上添加activeBackgroundColor属性，设置为你需要的颜色（比如透明色去掉默认背景）：

<Tab.Navigator
    initialRouteName="Home"
    labeled={false}
    shifting={false}
    activeColor="#333"
    inactiveColor="#999999"
    inactiveBackgroundColor='#000'
    activeBackgroundColor='transparent' // 去掉默认背景，也可设置自定义颜色
    barStyle={{
        paddingHorizontal: 10,
        backgroundColor: '#ffffff',
    }}
>
    <Tab.Screen
        name='Home'
        component={HomeScreen}
        options={{
            tabBarLabel: 'Home',
            tabBarIcon: ({ color }) => (
                <MaterialCommunityIcons name="home" color={color} size={26} />
            ),
        }}
    />
</Tab.Navigator>

方法二：自定义TabBarButton组件 #

如果需要更灵活的样式控制（比如自定义圆角、渐变背景等），可以通过tabBarButton属性完全自定义标签按钮：

import { TouchableRipple } from 'react-native-paper';

<Tab.Navigator
    initialRouteName="Home"
    labeled={false}
    shifting={false}
    activeColor="#333"
    inactiveColor="#999999"
    inactiveBackgroundColor='#000'
    barStyle={{
        paddingHorizontal: 10,
        backgroundColor: '#ffffff',
    }}
    screenOptions={{
        // 全局统一自定义按钮样式
        tabBarButton: (props) => (
            <TouchableRipple
                {...props}
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: props.focused ? '#f5f5f5' : '#000', // 自定义激活/非激活背景
                    borderRadius: 20, // 可选：添加圆角
                }}
            />
        )
    }}
>
    <Tab.Screen
        name='Home'
        component={HomeScreen}
        options={{
            tabBarLabel: 'Home',
            tabBarIcon: ({ color }) => (
                <MaterialCommunityIcons name="home" color={color} size={26} />
            ),
        }}
    />
</Tab.Navigator>

注意：自定义tabBarButton时，使用react-native-paper的TouchableRipple组件可保持Material Design的交互效果，若不需要波纹效果，也可替换为React Native的TouchableOpacity。

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