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,
 }}

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

我怎么解决这个问题？我需要获取堆栈导航器中使用的默认标题高度，以便对我的组件进行风格化。

Answer 1

该useHeaderHeight钩子用于获取由 React Navigation 渲染的标题的高度。

如果您只想获得默认标题高度，那么您需要使用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);

  // ...

}