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

Posted 2023-04-18

【中文标题】如何在 React-Native 应用程序中检索 iOS 状态栏高度？

【英文标题】：How do I retrieve iOS Status Bar height in React-Native app?

【发布时间】：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

我认为这应该是整个状态栏的一部分

【参考方案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