如何更改 MaterialTopTabNavigator 中选项卡的高度？

Question

目前标签设置为固定大小，上面留有很多白色space。

我希望能够调整选项卡的高度。

我能在源代码中找到的唯一高度设置是图标的大小。

如何更改选项卡的高度？

Answer 1

您可以将样式传递给导航器，如 this example 文档中所示。

    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: { fontSize: 12 },
        tabBarStyle: { backgroundColor: 'powderblue' },
      }}

Answer 2

选项 1：

tabBarStyle= { backgroundColor: 'powderblue', height: <SPECIFY HEIGHT> }

我认为这应该可行。

选项 2：

tabBarContentContainerStyle= {height: <SPECIFY HEIGHT>}

您可以为包含选项卡项的视图传递样式对象。

选项 3：

tabBar={() => return <></>}

您还可以使用参数 tabBar 为标签栏传递一个完全不同的元素。

如何更改 MaterialTopTabNavigator 中选项卡的高度？

How can I change the height of the tabs in MaterialTopTabNavigator?

configuration

user-interface

tabs

react-native