如何删除选项卡导航器的底部边框（反应导航）

Question

在 react navigation v5 中，在实现 materialTopTabNavigator 时，如何删除分隔选项卡菜单和单个选项卡页面的底部水平边框？

我在 tabBarOptions.style 中尝试了 borderWidth、borderBottomWidth、borderTopWidth 无济于事。

Answer 1

screenOptions={{
     tabBarStyle: {
              borderTopWidth: 0
        }
    }

Answer 2

底线不是边框，而是阴影（在 iOS 上）和高度（在 Android 上）。所以修复是：

<Tab.Navigator
    tabBarOptions={{
        style: {
            elevation: 0,   // for Android
            shadowOffset: {
                width: 0, height: 0 // for iOS
            },
        }
    }}
>
// ...

此外，在Android上，点击图标时，底部会短暂出现一条指示线。通过在 中设置高程道具使其不可见indicatorStyle：

<Tab.Navigator
    tabBarOptions={{
        indicatorStyle: {
            width: 0, height: 0, elevation: 0,      
        }
>
// ...

Answer 3

<Tab.Navigator
  tabBarOptions={{
    activeTintColor: "#fff",
    inactiveTintColor: "#fff",
    activeBackgroundColor: "#090D20",
    inactiveBackgroundColor: "#192665",
    style: {
      backgroundColor: "#192665",
      height: 60,
      borderTopColor: "red", //Change Like This
    },
  }}
>
  <Tab.Screen name="Home" component={Home} />
  <Tab.Screen name="ContactsScreen" component={ContactsScreen} />
</Tab.Navigator>[enter image description here][1]