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高度。

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

Answer 4

导入常量和维度。

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

在样式表中容器高度 - 状态栏高度 = 没有状态高度。

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

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

4 个答案: