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

【问题标题】：How to find height of status bar in Android through React Native?如何通过 React Native 在 Android 中找到状态栏的高度？
【发布时间】：2016-05-27 23:21:27
【问题描述】：

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

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

【问题讨论】：

标签： android react-native statusbar

【解决方案1】：

您不再需要任何插件，只需使用StatusBar.currentHeight：

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

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

【讨论】：

我得到了未定义的返回
对我来说 StatusBar.currentHeight 在 React Native 0.39.2 上的 iOS 上不起作用（未定义）。
RN@0.42 无法在 iOS 上运行、尚未在 Android 上测试
根据文档，它目前（0.49）仅适用于 android
RN v0.64：仍然仅适用于 Android。

【解决方案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> 上设置几个 props 来实现，如下所示：

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

【讨论】：

IOS的状态栏高度总是20？？
@DanielJosePadillaPeña 是的。除非它被隐藏，或者在来电期间应用程序处于活动状态 - 在这种情况下，它是 40 分。
@DanielJosePadillaPeña iOS X 不同。
android 中的某些状态栏不透明。你有办法检测它吗？
更好的解决方案是使用当前仅支持 android 的。然后在 reactNative paddingTop:Platform.OS === 'android' 的 StatusBar 的帮助下使用这个条件语句在你的样式中填充？ StatusBar.currentHeight : 0

【解决方案3】：

您可以使用这个帮助函数来获取 iOS 和 Android 上的状态栏高度。对于 iOS，当使用 >= iPhone X (with notch) 时，计算得到不同的 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();

【讨论】：

不错的一个！从来没有完美的解决方法，但感谢你写这个@slustel
这真的仍然是在 iOS 上获得高度的最佳方式吗？

【解决方案4】：

导入常量和维度。

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

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

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

【讨论】：

如果您不使用 Expo 怎么办？
@6rchid expo-constants 可以安装在一个裸露的（非 expo 管理的）项目中。所以@Oman 的答案在任何情况下都适用。

【解决方案5】：

“React-native-status-bar-height”是一个帮助你获取状态栏高度的小库。

【讨论】：

【解决方案6】：

import {NativeModules} from 'react-native';

// ...

const {StatusBarManager} = NativeModules;

const height = StatusBarManager.HEIGHT;

【讨论】：

您的答案可以通过添加有关代码的作用以及它如何帮助 OP 的更多信息来改进。