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

Question

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

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

谢谢。

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();