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中设置高程道具，使它不可见：

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

Answer 2

tabBarOptions：{ 风格：{ //删除android和ios上的边框顶部 borderTopWidth：0， borderTopColor：“透明”，

        elevation: 0,
        shadowColor : '#5bc4ff',
        shadowOpacity: 0,
        shadowOffset: {
          height: 0,
        },
        shadowRadius: 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]

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

3 个答案: