如何在 React-Native 应用程序中检索 iOS 状态栏高度？答案

【问题标题】：How do I retrieve iOS Status Bar height in React-Native app?如何在 React-Native 应用程序中检索 iOS 状态栏高度？
【发布时间】：2017-11-13 23:22:57
【问题描述】：

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

如何在 Swift(native) 中检索大小的答案已经得到解答，但我需要在 react native 应用程序中使用它。

【问题讨论】：

看起来你需要一些监听器代码，这里已经完成了：github.com/jgkim/react-native-status-bar-size。您可以使用StatusBarSizeIOS.js 中的方法或直接安装包。
iOS状态栏总是20px的高度所以你可以静态添加
20 不适合 iPhone X。
我在 iPhone X 上使用 45
我认为这应该是整个状态栏的一部分

标签： ios react-native react-native-ios

【解决方案1】：

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

即使你因为某些原因不想使用这个库 - 你仍然可以阅读源代码来复制代码中的实现

【讨论】：

React Navigation 确实支持刘海屏。这是detail document。它说可以通过react-native-device-info 检索设备信息

【解决方案2】：

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

【讨论】：

【解决方案3】：

如果您使用 Expo，您可以使用 Constants.statusBarHeight。

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

如果您使用带有 React Navigation 的 Vanilla React Native，您可以使用以下内容：

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

【讨论】：