Как найти высоту строки состояния в Android через React Native?

Ответ 1

Вы можете использовать пакет npm react-native-extra-dimensions-android, который предоставляет STATUS_BAR_HEIGHT, который вы можете использовать для вычитания из REAL_WINDOW_HEIGHT.

Ответ 2

Для этого вам больше не нужны плагины, просто используйте StatusBar.currentHeight:

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

ОБНОВЛЕНИЕ: По-видимому, это действительно работает на Android всегда, но на iOS, первоначально undefined действительно возвращается :(

Ответ 3

К сожалению, с версии 0.34 API для этого все еще непоследователен на разных платформах. StatusBarManager.HEIGHT предоставит вам текущую высоту строки состояния на Android.

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

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

В iOS вы можете использовать getHeight()

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

В качестве побочного примечания, если вы хотите, чтобы ваше приложение рисовало в строке состояния на Android, аналогичном поведению iOS по умолчанию, вы можете сделать это, установив пару реквизитов на <StatusBar> следующим образом:

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

Ответ 4

Вы можете использовать эту вспомогательную функцию, которая позволяет вам получить высоту строки состояния на iOS и Android. Для iOS вычисление выполняется для получения другой высоты StatusBar, когда используется> = iPhone X (с надрезом).

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
})