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

Question

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

如何在 Swift(本机(中检索大小的答案已经得到解答，但我在反应原生应用程序中需要这个。

Answer 1

如果您使用的是世博会，则可以使用Constants.statusBarHeight。

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

如果你将 Vanilla 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>
  );
}

输出：

	三星银河S10 5G	iPhone 8 Plus	iPhone 11 Pro Max	蹼
insets.top	39.71428680419922	20	44	0
Constants.statusBarHeight	39	20	44	0
StatusBar.currentHeight ?? 'N/A'	39.42856979370117	不适用	不适用	不适用

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

即使您由于某种原因不想使用此库 - 您仍然可以读取源代码以复制代码中的实现

您可以使用此软件包，它具有非常好的文档。反应原生状态栏高度