blocks|key|4433968|text|你不再需要任何插件了，只需使用StatusBar.currentHeight即可|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4433969|import+{StatusBar}+from+'react-native';
console.log('statusBarHeight:+',+StatusBar.currentHeight);|code-block|syntax|javascript|4433970|编辑:显然，这似乎在安卓上总是有效的，但在iOS上，最初确实返回了undefined+:(|4433971|entityMap^0|F|N|0|0|X|9|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

You don't need any plugins for this (anymore), just use <code>StatusBar.currentHeight</code>:

<pre><code>import {StatusBar} from 'react-native';
console.log('statusBarHeight: ', StatusBar.currentHeight);
</code></pre>

EDIT: Apparently this does seem to work on Android always, but on iOS, initially <code>undefined</code> is indeed returned :(

blocks|key|4433998|text|你可以使用这个辅助函数，它可以让你在iOS和Android上获得状态栏的高度。对于iOS，计算是为了在使用>=+iPhone+X(带凹槽)时获得不同的StatusBar高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4433999|//+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+%7C%7C+width+===+XSMAX_WIDTH+&&+height+===+XSMAX_HEIGHT
++++:+false;

export+const+StatusBarHeight+=+Platform.select({
++++ios:+isIPhoneX()+?+44+:+20,
++++android:+StatusBar.currentHeight,
++++default:+0
})|code-block|syntax|javascript|4434000|然后在导入时直接使用它：|4434001|import+{+StatusBarHeight+}+from+'./functions-file.js'

height:+StatusBarHeight+|4434002|使用钩子时的另一种选择-它通过react-navigation-stack+-+https://reactnavigation.org/docs/en/stack-navigator.html#headertransparent提供标题高度|offset|length|style|CODE|4434003|import+{+useHeaderHeight+}+from+'react-navigation-stack';

//+...

const+headerHeight+=+useHeaderHeight();|4434004|entityMap|0|LINK|mutability|MUTABLE|url|https://reactnavigation.org/docs/en/stack-navigator.html#headertransparent^0|0|0|0|0|F|M|14|22|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@$M|15|N|16|O|P]]|9|@$M|17|N|18|1|19]]|A|$]]|$1|Q|3|R|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

You can use this helper function which enables you to get the Status Bar height on iOS and Android. For iOS, the calculation is done to get the different StatusBar height when >= iPhone X (with notch) is used.

<pre><code>// 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 = () =&gt; Platform.OS === 'ios' &amp;&amp; !Platform.isPad &amp;&amp; !Platform.isTVOS
 ? width === X_WIDTH &amp;&amp; height === X_HEIGHT || width === XSMAX_WIDTH &amp;&amp; height === XSMAX_HEIGHT
 : false;

export const StatusBarHeight = Platform.select({
 ios: isIPhoneX() ? 44 : 20,
 android: StatusBar.currentHeight,
 default: 0
})
</code></pre>

Then use it directly when imported: 

<pre><code>import { StatusBarHeight } from './functions-file.js'

height: StatusBarHeight 
</code></pre>

Another option if you use <code>react-navigation-stack</code> - it provides the header height via hook - <a href="https://reactnavigation.org/docs/en/stack-navigator.html#headertransparent" rel="noreferrer">https://reactnavigation.org/docs/en/stack-navigator.html#headertransparent</a>

<pre><code>import { useHeaderHeight } from 'react-navigation-stack';

// ...

const headerHeight = useHeaderHeight();
</code></pre>

blocks|key|4434050|text|"React-native-status-bar-height“是一个帮助你获得状态栏高度的小型库。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4434051|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/react-native-status-bar-height^0|1|U|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

&quot;<a href="https://www.npmjs.com/package/react-native-status-bar-height" rel="nofollow noreferrer">React-native-status-bar-height</a>&quot; is a small library that helps you to get status bar height.

blocks|key|4434055|text|import+{NativeModules}+from+'react-native';

//+...

const+{StatusBarManager}+=+NativeModules;

const+height+=+StatusBarManager.HEIGHT;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4434056|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>import {NativeModules} from 'react-native';

// ...

const {StatusBarManager} = NativeModules;

const height = StatusBarManager.HEIGHT;
</code></pre>

How can I find the height of the status bar on Android through React Native?

If I check the <code>React.Dimensions</code> height the value seems to include the status bar height too but I'm trying to find the height of the layout without the status bar.

How to find height of status bar in Android through React Native?

React Native

Android

如何通过React Native找到Android上状态栏的高度？如果我检查React.Dimensions的高度，这个值似乎也包含了状态栏的高度，但我试图找出没有状态栏的布局的高度。

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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