如何通过React Native在Android中找到状态栏的高度？

Question

如何通过React Native在Android上找到状态栏的高度？

如果我检查React.Dimensions高度,值似乎也包括状态栏高度,但我试图找到没有状态栏的布局高度.

Answer 1

你不需要任何插件(只需使用)StatusBar.currentHeight:

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

编辑:显然这似乎总是在Android上工作,但在iOS上,最初undefined确实返回:(

Answer 2

不幸的是,从v0.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} />   

Answer 3

你可以使用这个辅助函数来获取 iOS 和 Android 上的状态栏高度。对于 iOS，当 >= iPhone X（带缺口）使用时，计算得到不同的 StatusBar 高度。

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

然后导入的时候直接使用：

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

height: StatusBarHeight 

如果您使用另一个选项react-navigation-stack- 它通过钩子提供标题高度 - https://reactnavigation.org/docs/en/stack-navigator.html#headertransparent

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

// ...

const headerHeight = useHeaderHeight();

Answer 4

导入常量和尺寸。

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

在样式表容器中 hight - 状态栏 hight = 无状态 hight。

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

Answer 5

import {NativeModules} from 'react-native';

// ...

const {StatusBarManager} = NativeModules;

const height = StatusBarManager.HEIGHT;

Answer 6

您可以通过以下方式获取状态栏的高度

  import { useSafeAreaInsets } from 'react-native-safe-area-context'

  const insets = useSafeAreaInsets()

  console.log('height of status bar', insets.top)