React Navigation obtiene la altura del encabezado de la pila

Solución:

Reaccionar navegación V5

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

o con la API de React Context (no recomendado)

Reaccionar navegación V4

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

Reaccionar navegación V2-V3

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

---

Otra respuesta a este problema

Estos son los ayudantes que utilizo.
getHeaderHeight El método obtiene la altura correcta en cada plataforma (incluido el iphone x) y orientación:

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

---

---

Utiliza Nuestro Buscador