React Navigation获取堆栈标题高度

Question

如何以编程方式获取 StackNavigator 标头的高度？

当 A 上的平移手势（拖动）被释放时，我需要检测组件 A 的位置是否在组件 B 内。但是，来自onPanResponderRelease 的gesture.moveY 的位置是相对于整个屏幕测量的，而从A 的onLayout 返回的位置是相对于父视图测量的。所以我需要知道父视图的当前高度来调和差异。

Answer 1

React 导航 V6

import { useHeaderHeight } from '@react-navigation/elements';
const headerHeight = useHeaderHeight();

React 导航 V5

import { useHeaderHeight } from '@react-navigation/stack';
const headerHeight = useHeaderHeight();

或React Context's API（不推荐）

React 导航 V4

import { Header } from 'react-navigation-stack';
const headerHeight = Header.HEIGHT;

React 导航 V2-V3

import { Header } from 'react-navigation';
const headerHeight = Header.HEIGHT;

---

Another answer to this problem

Answer 2

这些是我使用的助手。 getHeaderHeight 方法获取每个平台（包括 iphone x）和方向的正确高度：

import { Dimensions, DeviceInfo, Platform } from 'react-native';
import { Header } from 'react-navigation';

export const LANDSCAPE = 'landscape';
export const PORTRAIT = 'portrait';

export const getHeaderHeight = () => {
  let height;
  const orientation = getOrientation();
  height = getHeaderSafeAreaHeight();
  height += DeviceInfo.isIPhoneX_deprecated && orientation === PORTRAIT ? 24 : 0;

  return height;
};

// This does not include the new bar area in the iPhone X, so I use this when I need a custom headerTitle component
export const getHeaderSafeAreaHeight = () => {
  const orientation = getOrientation();
  if (Platform.OS === 'ios' && orientation === LANDSCAPE && !Platform.isPad) {
    return 32;
  }
  return Header.HEIGHT;
};

export const getOrientation = () => {
  const { width, height } = Dimensions.get('window');
  return width > height ? LANDSCAPE : PORTRAIT;
};

https://github.com/react-navigation/react-navigation/issues/2411#issuecomment-382434542

Answer 3

对于 React 导航 V6：

您可以将其用于功能组件

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

对于类组件和函数组件都是这样

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

// ...

<HeaderHeightContext.Consumer>
  {headerHeight => {
    /* render something */
  }}
</HeaderHeightContext.Consumer>

Read More from Here

Answer 4

我为此使用measureInWindow()。

它考虑了堆栈导航器的高度。