React Navigation 6 设置headerShown: false后如何获取Stack导航默认Header高度

安全阿岳

2026-10-7

问题原因

你配置了headerShown: false后，React Navigation不会渲染默认的Header组件，useHeaderHeight钩子是读取当前渲染的默认Header高度，所以返回值为0，属于正常逻辑。

解决方案

方案1：使用内置默认高度计算函数

直接调用React Navigation提供的getDefaultHeaderHeight工具函数获取官方默认导航栏高度，不受headerShown配置影响：

import { getDefaultHeaderHeight } from "@react-navigation/elements";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Dimensions } from "react-native";

function CustomHeader() {
  // 配置项：当前页面是否为模态页
  const isModal = false;
  // 获取顶部安全边距，适配刘海屏、灵动岛等设备
  const insets = useSafeAreaInsets();
  // 获取屏幕宽度
  const screenWidth = Dimensions.get('window').width;

  // 计算得到默认导航栏高度
  const headerHeight = getDefaultHeaderHeight(isModal, insets.top, screenWidth);

  return (
    <View style={{ height: headerHeight }}>
      {/* 行内若干按钮... */}
      <View 
        style={{ 
          position: "absolute",
          alignSelf: "center",
          top: headerHeight/2
        }} 
      />
    </View>
  )
}

如果你的自定义Header有自定义样式调整，不沿用默认高度，可以通过onLayout回调实时获取组件实际渲染高度，适配性更强：

import { useState } from "react";
import { View } from "react-native";

function CustomHeader() {
  const [headerHeight, setHeaderHeight] = useState(0);

  return (
    <View 
      onLayout={(e) => {
        // 实时获取当前Header的实际渲染高度
        const { height } = e.nativeEvent.layout;
        setHeaderHeight(height);
      }}
    >
      {/* 行内若干按钮... */}
      {headerHeight > 0 && (
        <View 
          style={{ 
            position: "absolute",
            alignSelf: "center",
            top: headerHeight / 2
          }} 
        />
      )}
    </View>
  )
}