Question

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

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

Answer 1

以下帖子包含updated answer to this problem

OLD ANSWER

您可以像这样访问标题高度

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

致Spencer Carli

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

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

React Navigation获取堆栈标题高度

3 个答案: