React Native如何修改导航栏头部高度？设置height属性无效

你遇到的问题是因为开启了headerTransparent: true，此时React Navigation会采用特殊布局逻辑渲染导航栏，直接在headerStyle中设置height会被框架内部样式覆盖，无法生效。

下面提供两种解决思路：

方案一：移除透明导航栏（若不需要透明效果） #

直接删除headerTransparent: true配置，此时headerStyle中的height属性就能正常生效。注意可能需要调整标题、返回按钮的位置，确保元素在自定义高度的导航栏中显示正常：

<Stack.Screen
  name='Item Picture'
  component={ItemPicture}
  options={({ navigation }) => ({
    headerTitleAlign: 'center',
    headerStyle: { backgroundColor: 'red', height: 360 },
    headerTitleStyle: {
      fontFamily: 'SFProRegular',
      color: '#ffffff',
    },
    headerLeft: () => (
      <TouchableOpacity onPress={navigation.goBack}>
        <Image
          source={require(chevronlight)}
          style={{ height: 20, width: 13 }}
        />
      </TouchableOpacity>
    ),
  })}
/>

方案二：保留透明导航栏，自定义头部组件 #

如果需要维持透明效果，建议直接自定义整个导航栏组件，并通过headerHeight指定高度，同时适配状态栏：

// 记得先导入对应组件
import { View, Text, TouchableOpacity, Image, StatusBar } from 'react-native';

<Stack.Screen
  name='Item Picture'
  component={ItemPicture}
  options={({ navigation }) => ({
    headerHeight: 360, // 告知框架导航栏高度
    header: () => (
      <View 
        style={{ 
          height: 360,
          backgroundColor: 'red',
          paddingTop: StatusBar.currentHeight || 20, // 适配状态栏高度
          position: 'absolute', // 保持透明悬浮效果
          top: 0,
          left: 0,
          right: 0,
        }}
      >
        {/* 返回按钮，绝对定位到左上角 */}
        <TouchableOpacity 
          onPress={navigation.goBack}
          style={{ position: 'absolute', left: 16, top: StatusBar.currentHeight || 20 }}
        >
          <Image
            source={require(chevronlight)}
            style={{ height: 20, width: 13 }}
          />
        </TouchableOpacity>
        {/* 标题居中显示 */}
        <Text 
          style={{
            fontFamily: 'SFProRegular',
            color: '#ffffff',
            textAlign: 'center',
            marginTop: StatusBar.currentHeight || 20,
          }}
        >
          Item Picture
        </Text>
      </View>
    ),
  })}
/>

这种方式完全自定义导航栏的布局，能精准控制高度和元素位置，避免框架默认样式的干扰。

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