如何在 React Native Navigation 中获取 Header 组件的高度

Question

我一直在寻找一种很好的方法来获取 react-native 堆栈导航器的 Header 组件的高度，但无济于事。我遇到了一个stale, complicated answer，它没有专门提供标题高度，但似乎也不可避免地结合了底部标签栏的高度。我想知道如何使用 react-navigation 计算导航标题和状态栏的高度。

作为参考，我的项目使用的是 react-navigation 3.11，但是如果有涉及 4.x 独有功能的解决方案，我会很乐意尝试升级。我检查了the documentation 并查看如何提供静态标题样式，但我不想要这个。我只是希望能够从视图中访问导航标题样式的高度属性。

谢谢。

Answer 1

在 React Navigation >4.x 中，您可以使用 HeaderHeightContext 或 useHeaderHeight 和 React's Context API 来获取标题的高度：

import { HeaderHeightContext } from '@react-navigation/stack';

// ...

<HeaderHeightContext.Consumer>
  {headerHeight => (
    /* ... */
  )}
</HeaderHeightContext.Consumer>

或

import { useHeaderHeight } from '@react-navigation/stack';

// ...

const headerHeight = useHeaderHeight();