React Navigation 获取堆栈 header 高度

Question

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

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

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;

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

我为此使用 measureInWindow()。

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

Answer 4

对于 React 导航 V6：

您可以将其用于功能组件

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

并且这适用于 class 组件和功能组件

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

// ...

<HeaderHeightContext.Consumer>
  {headerHeight => {
    /* render something and use "headerHeight" in child components*/
  }}
</HeaderHeightContext.Consumer>

React Navigation 获取堆栈 header 高度

React Navigation get stack header height

react-native

react-navigation