如何获取react-navigation/native-stack中设置headerLargeTitle的当前头部高度？

你遇到的问题是useHeaderHeight()钩子只会返回默认的64（紧凑状态下的头部+状态栏高度），无法正确获取启用headerLargeTitle后的动态头部高度。以下是几种可行的解决方法：

方法1：使用useHeaderMeasurements钩子（React Navigation 6+） #

React Navigation 6及以上版本的@react-navigation/elements包提供了useHeaderMeasurements钩子，能直接获取头部的实际测量高度，包括大标题展开或收起时的动态值：

import { useHeaderMeasurements } from '@react-navigation/elements';

function TargetScreen() {
  const headerMeasurements = useHeaderMeasurements();
  // headerMeasurements.height 即为当前头部的实际高度
  console.log('当前头部高度:', headerMeasurements.height);

  return (
    // 你的屏幕内容
  );
}

方法2：自定义头部并手动测量高度 #

如果默认钩子不满足需求，可以自定义大标题头部组件，通过onLayout事件测量自身高度并传递给屏幕组件：

1. 自定义头部组件：

import { View, Text, LayoutChangeEvent, StatusBar } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useState } from 'react';

function CustomLargeHeader() {
  const navigation = useNavigation();
  const [headerHeight, setHeaderHeight] = useState(0);

  const handleLayout = (e: LayoutChangeEvent) => {
    const { height } = e.nativeEvent.layout;
    setHeaderHeight(height);
    // 将高度传递给屏幕组件
    navigation.setParams({ dynamicHeaderHeight: height });
  };

  return (
    <View 
      onLayout={handleLayout} 
      style={{ 
        paddingTop: StatusBar.currentHeight, 
        backgroundColor: '#fff',
        paddingHorizontal: 16,
      }}
    >
      <Text style={{ fontSize: 34, fontWeight: '700', paddingVertical: 16 }}>我的大标题</Text>
    </View>
  );
}

2. 在屏幕组件中获取高度：

function TargetScreen({ route }) {
  // 默认值设为64，避免未获取到参数时出错
  const currentHeaderHeight = route.params?.dynamicHeaderHeight || 64;

  return (
    // 使用currentHeaderHeight进行布局调整
  );
}

// 配置屏幕的导航选项
TargetScreen.navigationOptions = () => ({
  header: () => <CustomLargeHeader />,
});

方法3：监听滚动计算动态高度（iOS专属场景） #

iOS上大标题会随滚动收起，可通过监听滚动视图的偏移量，结合固定的展开/紧凑高度计算当前头部高度：

import { ScrollView, Platform } from 'react-native';
import { useHeaderHeight } from '@react-navigation/elements';
import { useState } from 'react';

function TargetScreen() {
  const compactHeight = useHeaderHeight();
  // iOS大标题展开的默认高度，可根据实际样式调整
  const largeHeight = Platform.OS === 'ios' ? 96 : 64;
  const [currentHeight, setCurrentHeight] = useState(largeHeight);

  const handleScroll = (e) => {
    if (Platform.OS !== 'ios') return;
    const scrollY = e.nativeEvent.contentOffset.y;
    // 计算滚动过程中头部高度的变化，确保不低于紧凑状态高度
    const calculatedHeight = Math.max(compactHeight, largeHeight - scrollY);
    setCurrentHeight(calculatedHeight);
  };

  return (
    <ScrollView 
      onScroll={handleScroll} 
      scrollEventThrottle={16} // 控制滚动事件触发频率，提升性能
    >
      {/* 屏幕内容 */}
    </ScrollView>
  );
}

注意事项 #

• iOS和Android的大标题头部默认高度不同，建议用Platform.OS区分处理。
• 确保在native-stack的屏幕配置中正确设置了headerLargeTitle: true，避免自定义头部覆盖默认的大标题逻辑。

内容的提问来源于stack exchange，提问作者Cristian Flórez