如何通过React Native找到Android中状态栏的高度？
如何通过React Native找到Android中状态栏的高度？
提问于 2016-02-16 23:34:44
如何通过React Native找到Android上状态栏的高度？
如果我检查React.Dimensions的高度，这个值似乎也包含了状态栏的高度，但我试图找出没有状态栏的布局的高度。
回答 4
Stack Overflow用户
发布于 2016-08-03 22:30:59
你不再需要任何插件了，只需使用StatusBar.currentHeight即可
import {StatusBar} from 'react-native';
console.log('statusBarHeight: ', StatusBar.currentHeight);编辑:显然，这似乎在安卓上总是有效的，但在iOS上，最初确实返回了undefined :(
Stack Overflow用户
发布于 2019-10-05 20:34:14
你可以使用这个辅助函数，它可以让你在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();Stack Overflow用户
发布于 2021-09-29 13:26:47
"React-native-status-bar-height“是一个帮助你获得状态栏高度的小型库。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35436643
复制相关文章
相似问题