[英]How do I retrieve iOS Status Bar height in React-Native app?
For Android I know I can use StatusBar.currentHeight<\/code> but I'm not sure how to do so for iOS.
对于 Android,我知道我可以使用
StatusBar.currentHeight<\/code>但我不确定如何在 iOS 上使用。
The answer to how to retrieve the size in Swift(native) has already been answered but I need this in a react native app.如何在 Swift(native) 中检索大小的答案已经得到解答,但我需要在 react native 应用程序中使用它。
![](/img/trans.png)
"
You can use React Navigation that already have support of iPhone X. 您可以使用已经支持iPhone X的React Navigation 。
Even if you don't want use this library because of some reason - you still can read source code to copy implementation in your code 即使您因为某些原因不想使用此库,您仍然可以阅读源代码以复制代码中的实现
You can use this package, it has very good documentation. 你可以使用这个包,它有很好的文档。 react-native-status-bar-height
反应原生状态栏高度
If you're using Expo you can use Constants.statusBarHeight
.如果您使用 Expo,您可以使用
Constants.statusBarHeight
。
import Constants from 'expo-constants';
const statusBarHeight = Constants.statusBarHeight;
If you're using Vanilla React Native with React Navigation you can use the following:如果您使用带有 React Navigation 的 Vanilla React Native,您可以使用以下内容:
import { useSafeAreaInsets } from 'react-native-safe-area-context';
const insets = useSafeAreaInsets();
const statusBarHeight = insets.top;
See: https://reactnavigation.org/docs/handling-safe-area/#use-the-hook-for-more-control请参阅: https ://reactnavigation.org/docs/handling-safe-area/#use-the-hook-for-more-control
Sample Code:示例代码:
import * as React from 'react';
import { Text, View, StatusBar } from 'react-native';
import Constants from 'expo-constants';
import { useSafeAreaInsets, SafeAreaProvider } from 'react-native-safe-area-context';
export default function App() {
return (
<SafeAreaProvider>
<ChildScreen />
</SafeAreaProvider>
);
}
function ChildScreen() {
const insets = useSafeAreaInsets();
return (
<View style={{ flex: 1, justifyContent: 'center'}}>
<Text>
{insets.top}
</Text>
<Text>
{Constants.statusBarHeight}
</Text>
<Text>
{StatusBar.currentHeight ?? 'N/A'}
</Text>
</View>
);
}
Output:输出:
Samsung Galaxy S10 5G![]() |
iPhone 8 Plus ![]() |
iPhone 11 Pro Max ![]() |
Web![]() |
|
---|---|---|---|---|
insets.top |
39.71428680419922 ![]() |
20 ![]() |
44 ![]() |
0 ![]() |
Constants.statusBarHeight |
39 ![]() |
20 ![]() |
44 ![]() |
0 ![]() |
StatusBar.currentHeight ?? 'N/A' |
39.42856979370117 ![]() |
N/A![]() |
N/A![]() |
N/A![]() |
Live code: https://snack.expo.dev/@dcangulo/statusbarheight实时代码: https ://snack.expo.dev/@dcangulo/statusbarheight
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.