如何找到高度的状态栏在 Android 通过反应本机？

小开

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

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

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

小开

不幸的是，在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} />

小开

您可以使用这个 helper 函数，它使您能够获得 iOS 和 Android 上的状态栏高度。对于 iOS，当使用 > = iPhoneX (带缺口)时，计算得到不同的 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();

小开

进口常数和维度。

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

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

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

小开

import {NativeModules} from 'react-native';


// ...


const {StatusBarManager} = NativeModules;


const height = StatusBarManager.HEIGHT;

小开

如果您使用的是 @react-navigation/native-stack

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

链接到源代码

小开

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

小开

对于需要转义 StatusBar 组件的情况，Android 的解决方案是使用 StatusBar.currentHeight转义 StatusBar 组件。为了 IOS 我使用 response-national 的 SafeAreaView组件来转义 StatusBar。