React Native如何在Android上获取正确的状态栏高度

Question

我正在尝试使用React Native的StatusBar.currentHeight获取Android设备上的状态栏高度https://facebook.github.io/react-native/docs/statusbar。在Pixel 2上，该变量为24，而实际上状态栏高度为19。是否有人知道如何在所有设备上使用React Native获取正确的状态栏高度呢？

- Scott w

---

在我的情况下，StatusBar.currentHeight 的值是 49.09090805053711，但实际上在 Pixel 4 模拟器上应该是 62。你最终是如何解决这个问题的？ - ThaJay

@Scottw 这个问题有什么最新进展吗？你找到解决方案了吗？ - instanceof

Answer 1

您可以尝试下载expo-constants模块。

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

编辑

或者

您可以使用react-native-safe-area-context

• 示例

import { useSafeAreaInsets } from 'react-native-safe-area-context';

function HookComponent() {
  const insets = useSafeAreaInsets();

  useEffect(() => {
     const { top , bottom , left , right } = insets // typeof { top: number, right: number, bottom: number, left: number }
     console.log(top , bottom , left , right)
  },[insets])

  return <View style={{ paddingBottom: Math.max(insets.bottom, 16) }} />;
}

- hong developer

Answer 2

import { Dimensions, StatusBar } from 'react-native'

const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get('window');
const STATUSBAR_HEIGHT = StatusBar.currentHeight;

- Idan

---

StatusBar.currentHeight 在某些设备上似乎报告了错误的信息。就像在 Pixel 2 上提到的那样，当高度实际上为19时，你会得到24的返回值。 - Scott w