如何通过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';

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

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

Answer 5

import {NativeModules} from 'react-native';

// ...

const {StatusBarManager} = NativeModules;

const height = StatusBarManager.HEIGHT;

Answer 6

如果您正在使用

@react-navigation/native-stack

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

来源链接

Answer 7

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

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

  const insets = useSafeAreaInsets()

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

Answer 8

对于需要转义 StatusBar 组件的情况，我的 Android 解决方案是使用

StatusBar.currentHeight

来转义 StatusBar 组件。为了 iOS我使用react-native的

SafeAreaView

组件来转义StatusBar。

Answer 9

试试这个，

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

function App(): JSX.Element {
  return (
    <View style={styles.container}>
        ...
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors._primaryStatusBarBackgroundColor,
    paddingTop: Platform.OS ? StatusBarManager.HEIGHT : StatusBar.currentHeight, // it's worked for me 
  },
});

我没有使用 SafeAreaView，而是使其可以在每个操作系统上运行

Answer 10

包 react-native-status-bar-height 运行良好，但是，如果您不需要其他依赖项，我在这里提取了要点：

创建文件 getStatusBarHeight.tsx

import {Dimensions, Platform, StatusBar} from 'react-native';

const STATUSBAR_DEFAULT_HEIGHT = 20;
const STATUSBAR_X_HEIGHT = 44;
const STATUSBAR_IP12_HEIGHT = 47;
const STATUSBAR_IP12MAX_HEIGHT = 47;
const STATUSBAR_IP14PRO_HEIGHT = 49;

const X_WIDTH = 375;
const X_HEIGHT = 812;

const XSMAX_WIDTH = 414;
const XSMAX_HEIGHT = 896;

const IP12_WIDTH = 390;
const IP12_HEIGHT = 844;

const IP12MAX_WIDTH = 428;
const IP12MAX_HEIGHT = 926;

const IP14PRO_WIDTH = 393;
const IP14PRO_HEIGHT = 852;

const IP14PROMAX_WIDTH = 430;
const IP14PROMAX_HEIGHT = 932;

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

let statusBarHeight = STATUSBAR_DEFAULT_HEIGHT;

if (Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS) {
  if (W_WIDTH === X_WIDTH && W_HEIGHT === X_HEIGHT) {
    statusBarHeight = STATUSBAR_X_HEIGHT;
  } else if (W_WIDTH === XSMAX_WIDTH && W_HEIGHT === XSMAX_HEIGHT) {
    statusBarHeight = STATUSBAR_X_HEIGHT;
  } else if (W_WIDTH === IP12_WIDTH && W_HEIGHT === IP12_HEIGHT) {
    statusBarHeight = STATUSBAR_IP12_HEIGHT;
  } else if (W_WIDTH === IP12MAX_WIDTH && W_HEIGHT === IP12MAX_HEIGHT) {
    statusBarHeight = STATUSBAR_IP12MAX_HEIGHT;
  } else if (W_WIDTH === IP14PROMAX_WIDTH && W_HEIGHT === IP14PROMAX_HEIGHT) {
    statusBarHeight = STATUSBAR_IP14PRO_HEIGHT;
  } else if (W_WIDTH === IP14PRO_WIDTH && W_HEIGHT === IP14PRO_HEIGHT) {
    statusBarHeight = STATUSBAR_IP14PRO_HEIGHT;
  }
}

export function getStatusBarHeight() {
  return Platform.select({
    ios: statusBarHeight,
    android: StatusBar.currentHeight,
    default: 0,
  });
}

用途：

import {getStatusBarHeight} from './getStatusBarHeight';

export const Test = () => {

  const statusBarHeight = getStatusBarHeight();

  return <Text style={{ marginTop: statusBarHeight }}>Test</Text>

}

Answer 11

const deviceHeight = Dimensions.get('screen').height;
deviceHeight={deviceHeight}