React Navigation 6 - 自定义 header 高度

Question

我有一个自定义 header 组件：

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

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

为了获得 header 我正在做的身高：

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

 const headerHeight = useHeaderHeight();

但是...它 returns 我 0，就像我在堆栈导航器中所做的那样：

 screenOptions={{
    headerShown: false,
 }}

因为，我正在屏幕内渲染自定义 header。

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

Answer 1

useHeaderHeight 挂钩用于获取由 React Navigation 呈现的 header 的高度。

如果你只想获得默认的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);

  // ...

}