如何移除Material Bottom Tabs Navigator中激活标签后的白色椭圆？

问题描述 #

使用@react-navigation/material-bottom-tabs组件，遵循官方文档开发时，激活标签图标后方出现奇怪白色圆形，耗时两小时尝试多种方法未解决。React Native 0.68.1版本无此问题，升级到0.70.6后触发异常。

补充异常情况：

• 设置shifting={true}后，点击标签时同样存在视觉异常
• 初始问题截图：
• shifting模式点击异常截图：

可行解决方案 #

• 匹配依赖兼容版本：查看@react-navigation/material-bottom-tabs的版本日志，确认支持React Native 0.70.x的对应版本，尝试升级或降级该包至兼容版本。
• 自定义样式强制覆盖：通过screenOptions中的样式属性，覆盖默认激活状态的背景样式：

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

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      activeColor="#your-active-color"
      barStyle={{ backgroundColor: '#your-bar-bg' }}
      screenOptions={{
        tabBarItemStyle: {
          backgroundColor: 'transparent', // 清除激活时的默认背景
        },
        tabBarIcon: ({ focused, color }) => (
          // 你的图标组件，比如Ionicons
          <Ionicons name={focused ? 'home' : 'home-outline'} color={color} size={24} />
        ),
      }}
    >
      {/* 你的标签页配置 */}
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

• 禁用按压涟漪效果：通过tabBarOptions设置pressColor为透明，避免默认涟漪效果导致的视觉异常：

<Tab.Navigator
  tabBarOptions={{
    pressColor: 'transparent',
  }}
>
  {/* ... */}
</Tab.Navigator>

• 排查全局样式冲突：检查项目中是否存在全局样式（如全局View样式重置）影响了底部标签栏的组件样式，针对性调整冲突样式。

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