我该如何在 React-Native 应用中获取 iOS 状态栏的高度？

Question

对于Android，我知道我可以使用StatusBar.currentHeight，但是我不确定如何在iOS中使用。

如何在Swift（原生）中检索大小的答案已经被回答了，但我需要在React Native应用程序中使用它。

- jasan

---

看起来你需要一些监听器代码，这里已经很好地完成了：https://github.com/jgkim/react-native-status-bar-size。你可以使用`StatusBarSizeIOS.js`中找到的方法或者只需安装该软件包。 - G0dsquad

iOS 状态栏始终有 20 像素的高度，因此您可以静态添加。 - vivek bhoraniya

iPhone X 屏幕不支持 20。 - blacksun

我正在使用 iPhone X 的 45 版本。 - NinetyHH

我认为这应该作为整个状态栏的一部分。 - rodrigoelp

Answer 1

如果你正在使用Expo，你可以使用Constants.statusBarHeight。

import Constants from 'expo-constants';
const statusBarHeight = Constants.statusBarHeight;

如果您正在使用原生 React Native 和 React Navigation，则可以使用以下内容：

import { useSafeAreaInsets } from 'react-native-safe-area-context';
const insets = useSafeAreaInsets();
const statusBarHeight = insets.top;

参见：https://reactnavigation.org/docs/handling-safe-area/#use-the-hook-for-more-control

示例代码：

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>
  );
}

输出:

	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

现场代码: https://snack.expo.dev/@dcangulo/statusbarheight

- dcangulo

---

你真的很懂。 - flunder

Answer 2

您可以使用已经支持iPhone X的React Navigation库。

即使由于某些原因您不想使用该库，您仍然可以查看源代码以复制实现到您的代码中。

- Oleksandr Cherniavenko

---

React Navigation 支持刘海屏。这里是详细文档。文档中提到可以通过 react-native-device-info 获取设备信息。 - yancaico

Answer 3

你可以使用这个包，它有非常好的文档。 react-native-status-bar-height

- Cyber