react-navigation - 如何删除选项卡导航器的底部边框( react 导航)

Question

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

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

Answer 1

底线不是边框，而是阴影(在 iOS 上)和高度(在 Android 上)。所以修复是:

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

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

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