¿Cómo encontrar la altura de la barra de estado en Android a través de React Native?

4 minutos de lectura

¿Cómo puedo encontrar la altura de la barra de estado en Android a través de React Native?

Si compruebo el React.Dimensions altura el valor parece incluir la altura de la barra de estado también, pero estoy tratando de encontrar la altura del diseño sin la barra de estado.

avatar de usuario
IjzerenHein

No necesita ningún complemento para esto (más), solo use StatusBar.currentHeight:

import {StatusBar} from 'react-native';
console.log('statusBarHeight: ', StatusBar.currentHeight);

EDITAR: Aparentemente, esto parece funcionar siempre en Android, pero en iOS, inicialmente undefined es de hecho devuelto 🙁

  • Me devolvieron indefinido

    – Arnoldo

    9 de agosto de 2016 a las 8:52

  • Para mí, StatusBar.currentHeight no funciona (indefinido) en iOS en React Native 0.39.2.

    –Ben Clayton

    6 de enero de 2017 a las 16:49

  • RN@0.42 no funciona en iOS, aún no se ha probado en Android

    – kim

    5 de abril de 2017 a las 6:05

  • según el documento, actualmente (0.49) funcionará solo para Android

    –Jeffrey Rajan

    19 de noviembre de 2017 a las 14:48

  • RN v0.64: ​​todavía solo disponible en Android.

    – en vez de

    27 mayo 2021 a las 13:00

Desafortunadamente, a partir de la v0.34, la API para hacer esto sigue siendo inconsistente entre plataformas. StatusBarManager.HEIGHT te dará la altura actual de la barra de estado en Android.

import { Platform, NativeModules } from 'react-native';
const { StatusBarManager } = NativeModules;

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT;

En iOS, puede usar getHeight()

StatusBarManager.getHeight((statusBarHeight)=>{
  console.log(statusBarHeight)
})

Como nota al margen, si desea que su aplicación se dibuje debajo de la barra de estado en Android de manera similar al comportamiento predeterminado de iOS, puede hacerlo configurando un par de accesorios en <StatusBar> como sigue:

<StatusBar translucent={true} backgroundColor={'transparent'} {...props} />   

  • ¿IOS tiene siempre 20 en la altura de la barra de estado?

    – Daniel José Padilla Peña

    25 de agosto de 2017 a las 15:37

  • @DanielJosePadillaPeña Sí. A menos que esté oculto o una aplicación esté activa durante una llamada entrante, en cuyo caso son 40 puntos.

    – jmurzy

    27 de agosto de 2017 a las 0:05


  • @DanielJosePadillaPeña iOS X es diferente.

    – AJcodez

    3 oct 2017 a las 15:03

  • Algunas barras de estado en Android no son transparentes. tienes alguna forma de detectarlo?

    – Daniel José Padilla Peña

    29 de noviembre de 2017 a las 2:59

  • Una mejor solución sería usar que actualmente solo es compatible con Android. Luego use esta declaración condicional para rellenar sus estilos con la ayuda de StatusBar de reactNative paddingTop:Platform.OS === ‘android’ ? StatusBar.currentHeight: 0

    – Chinthaka Devinda

    16 de noviembre de 2020 a las 4:39

avatar de usuario
dblazeski

Puede usar esta función auxiliar que le permite obtener la altura de la barra de estado en iOS y Android. Para iOS, el cálculo se realiza para obtener las diferentes alturas de la barra de estado cuando se usa >= iPhone X (con muesca).

// functions-file.js
import { Dimensions, Platform, StatusBar } from 'react-native';

const X_WIDTH = 375;
const X_HEIGHT = 812;

const XSMAX_WIDTH = 414;
const XSMAX_HEIGHT = 896;

const { height, width } = Dimensions.get('window');

export const isIPhoneX = () => Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS
    ? width === X_WIDTH && height === X_HEIGHT || width === XSMAX_WIDTH && height === XSMAX_HEIGHT
    : false;

export const StatusBarHeight = Platform.select({
    ios: isIPhoneX() ? 44 : 20,
    android: StatusBar.currentHeight,
    default: 0
})

Luego utilícelo directamente cuando lo importe:

import { StatusBarHeight } from './functions-file.js'

height: StatusBarHeight 

Otra opción si usas react-navigation-stack – proporciona la altura del encabezado a través del gancho – https://reactnavigation.org/docs/en/stack-navigator.html#headertransparent

import { useHeaderHeight } from 'react-navigation-stack';

// ...

const headerHeight = useHeaderHeight();

  • ¡Buena esa! Nunca es perfecto tener que hacer soluciones pero gracias por escribir esto @slusatel

    –Ash Hogarth

    11 oct 2019 a las 12:21

  • ¿Sigue siendo en serio la mejor manera de obtener la altura en iOS?

    – twiz

    17 de julio de 2020 a las 16:16

  • Esto está fuera de datos ya que no incluye iPhones más nuevos. parece el paquete react-native-status-bar-height es una implementación más actualizada de este método.

    –Michael Yaworski

    6 de junio a las 5:29

importar constantes y Dimensiones.

import Constants from 'expo-constants';
import Dimensions  from 'react-native';

en hoja de estilo altura del contenedor – altura de la barra de estado = sin altura de estado.

 container: {   height: Dimensions.get('window').height - Constants.statusBarHeight,}

Si estás usando @react-navigation/native-stack

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

Enlace a la fuente

avatar de usuario
mehdi saghari

React-native-status-bar-height” es una pequeña biblioteca que le ayuda a obtener la altura de la barra de estado.

import {NativeModules} from 'react-native';

// ...

const {StatusBarManager} = NativeModules;

const height = StatusBarManager.HEIGHT;

  • Su respuesta podría mejorarse agregando más información sobre lo que hace el código y cómo ayuda al OP.

    – Tyler2P

    27 de febrero a las 19:49

¿Ha sido útil esta solución?