如何在React Native中修改Bottom Tab Navigator的高度

要修改React Native中React Navigation v6版本的底部标签导航栏高度，直接在Tabs.Navigator的screenOptions配置中新增tabBarStyle属性指定高度即可，旧版本的适配方案大多不兼容v6的属性规范，这是之前尝试的方案无效的核心原因。

修改步骤： #

1. 在现有代码的screenOptions配置对象中，新增tabBarStyle字段，自定义高度和适配安全边距：

tabBarStyle: {
  height: 80, // 替换为你需要的导航栏高度值
  paddingBottom: 8, // 适配底部手势条/刘海安全区，避免导航内容被遮挡
  backgroundColor: COLORS.darkGgrey // 原有背景色配置可以挪到这里，优先级更高
}

2. 可以删掉原有重复的tabBarActiveBackgroundColor、tabBarInactiveBackgroundColor配置，直接在tabBarStyle里统一设置背景色即可。

修改后的完整代码如下：

export default function AppTabs({ logged }) {
  const Tabs = createBottomTabNavigator();

  return (
    <NavigationContainer>
      <SafeAreaView style={{ flex: 1 }}>
        <Tabs.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              const current_color = focused ? COLORS.white : COLORS.lightGrey;

              if (route.name === "Home") {
                return <Foundation name="home" size={28} color={current_color}/>
              } else if (route.name === "Search") {
                return <Ionicons name="search" size={28} color={current_color} />
              } else if (route.name === "Library") {
                return <MaterialCommunityIcons name="bookshelf" size={28} color={current_color} />
              }
            },
            header: () => null,
            tabBarActiveTintColor: COLORS.white,
            tabBarInactiveTintColor: COLORS.lightGrey,
            // 新增的导航栏样式配置
            tabBarStyle: {
              height: 80,
              paddingBottom: 8,
              backgroundColor: COLORS.darkGgrey
            }
          })}
        >
          <Tabs.Screen name="Home" component={Home}/>
          <Tabs.Screen name="Search" component={Search}/>
          <Tabs.Screen name="Library" component={Library}/>
        </Tabs.Navigator>
        <PlayerBar track_name="Heart Attack" artist="Dave"/>
      </SafeAreaView>
    </NavigationContainer>
  );
}

如果修改后高度仍未生效，可将外层的SafeAreaView移除，改为在每个Tab对应的页面内单独添加SafeAreaView，避免全局安全边距计算覆盖导航栏的自定义高度。

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