如何移除React Native Navigation中Material Top Tabs的底部边框？

使用Material Top Tab Navigator时，“照片”“视频”“已保存”选项卡下方的底部边框始终无法隐藏，已尝试以下配置仍无效：

<ProfileTabs.Navigator
  screenOptions={{
    tabBarIndicatorStyle: {
      backgroundColor: 'transparent',
      borderWidth: 0,
      borderTopWidth: 0,
      borderBottomWidth: 0,
      borderColor: 'transparent',
    },
    tabBarStyle: {
      borderColor: 'transparent',
      borderWidth: 0,
      borderTopWidth: 0,
      borderBottomWidth: 0,
    },
    tabBarContentContainerStyle: {
      borderTopWidth: 0,
      borderColor: 'transparent',
    },
    tabBarItemStyle: {
      borderTopWidth: 0,
      borderWidth: 0,
      borderBottomWidth: 0,
      borderColor: 'transparent',
    },
  }}>

解决方案 #

针对跨平台默认样式做针对性调整，修改后的配置如下：

<ProfileTabs.Navigator
  screenOptions={{
    tabBarIndicatorStyle: {
      backgroundColor: 'transparent', // 隐藏选中状态的指示器
    },
    tabBarStyle: {
      borderBottomWidth: 0, // 移除底部边框
      elevation: 0, // 移除Android默认阴影（易被误认成边框）
      shadowOpacity: 0, // 移除iOS默认阴影
      borderColor: 'transparent',
    },
  }}>

关键修改点 #

• 保留tabBarIndicatorStyle的backgroundColor: 'transparent'，确保选中状态的指示器完全隐藏
• 在tabBarStyle中添加elevation: 0和shadowOpacity: 0，消除跨平台默认的阴影效果（多数情况下阴影会被误判为边框）
• 移除冗余的样式配置，仅保留核心生效属性，避免无效代码干扰

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