如何移除@react-navigation/material-bottom-tabs选中标签的椭圆形背景

这个椭圆形背景是material-bottom-tabs开启shifting模式后的默认Material Design高亮效果，以下两种方法可以解决：

方法一：关闭Shifting模式 #

当shifting={true}时，组件会给选中标签添加椭圆背景高亮，直接将其改为false即可移除该效果，同时保持底部栏的基础样式：

<Tab.Navigator
  shifting={false} // 修改此处
  initialRouteName="Home"
  activeColor="#fff"
  inactiveColor="#333"
  barStyle={{ backgroundColor: "tomato" }}
  labeled={true}
>
  {/* 子Screen代码保持不变 */}
</Tab.Navigator>

方法二：自定义样式覆盖（保留Shifting其他效果） #

如果需要保留shifting模式下的标签颜色切换效果，仅移除椭圆背景，可以通过自定义按钮样式实现：

<Tab.Navigator
  shifting={true}
  initialRouteName="Home"
  activeColor="#fff"
  inactiveColor="#333"
  barStyle={{ backgroundColor: "tomato" }}
  labeled={true}
  screenOptions={{
    // 将选中按钮的背景设为透明
    tabBarButtonStyle: {
      backgroundColor: 'transparent',
    },
    // 可选：自定义按压状态的背景，替代默认椭圆效果
    tabBarPressableStyle: ({ pressed }) => ({
      backgroundColor: pressed ? 'rgba(255,255,255,0.1)' : 'transparent',
    })
  }}
>
  {/* 子Screen代码保持不变 */}
</Tab.Navigator>

补充说明 #

• 方法一适合不需要shifting动态效果的场景，修改简单直接；
• 方法二适合需要保留标签颜色切换、仅去掉椭圆背景的需求，通过样式覆盖实现更灵活的定制。

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