React Navigation 6 - 自定义标题高度

Question

我有一个自定义标题组件：

function CustomHeader() {
    return (
       <View style={{ height: headerHeight }}>
          {/* Some buttons in a row... */}
          <View 
            style={{ 
              position: "absolute",
              alignSelf: "center",
              top: headerHeight/2
            }} 
          />
       </View>
    )
}

如您所见，我绝对将视图定位在标题的中心，顶部为 headerHeight/2。

为了获得标题高度我正在做：

 import { useHeaderHeight } from "@react-navigation/elements";

 const headerHeight = useHeaderHeight();

但是...它返回 0，就像我正在做的堆栈导航器一样：

 screenOptions={{
    headerShown: false,
 }}

因为，我正在屏幕内呈现自定义标题。

我该如何解决这个问题？我需要获取 Stack Navigator 中使用的默认标题高度，以便对我的组件进行样式化。

Answer 1

useHeaderHeight 钩子用于获取由 React Navigation 呈现的标题的高度。

如果只想获取默认的header高度，那么需要使用getDefaultHeaderHeight:

import { getDefaultHeaderHeight } from '@react-navigation/elements';
import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';

// ...

const MyComponent = () => {
  const frame = useSafeAreaFrame();
  const insets = useSafeAreaInsets();

  const headerHeight = getDefaultHeaderHeight(frame, false, insets.top);

  // ...

}