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

Question

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

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

Answer 2

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

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