如何修改MaterialTopTabNavigator的标签栏高度

不需要修改库源码，通过组件自带的配置项即可实现高度自定义，消除顶部留白：

• 如果你使用的是 React Navigation 6.x 版本，在导航配置的screenOptions字段中添加tabBarStyle配置，直接指定height属性即可：

<Tab.Navigator
  screenOptions={{
    tabBarStyle: {
      height: 50, // 替换为你需要的实际高度值
      paddingTop: 0, // 去掉默认顶部内边距，消除留白
      paddingBottom: 0
    },
    // 同步调整标签文字/图标样式，避免内容偏移
    tabBarLabelStyle: {
      margin: 0
    },
    tabBarIconStyle: {
      margin: 0
    }
  }}
>
  {/* 你的标签页业务配置 */}
</Tab.Navigator>

• 如果你使用的是 React Navigation 5.x 版本，配置逻辑一致，只需把对应参数放到tabBarOptions字段中即可：

<Tab.Navigator
  tabBarOptions={{
    style: {
      height: 50,
      paddingTop: 0,
      paddingBottom: 0
    },
    labelStyle: {
      margin: 0
    },
    iconStyle: {
      margin: 0
    }
  }}
>
  {/* 你的标签页业务配置 */}
</Tab.Navigator>

提示：如果调整高度后标签内容显示不全，可以同步修改tabBarItemStyle的边距、tabBarLabelStyle的字号，和你设置的高度匹配即可。

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