如何知道React Native中iOS设备的有用高度？

Question

在某些非常特殊的情况下，我需要将View的高度设置为设备有用区域的整个高度（不使用flex）。

我使用了一个硬编码的“缺口高度”来计算此有用的高度，但是我发现缺口取决于设备的高度可能有所不同。（iPhone XS和iPhone XS Max之间有3点差异）。

有没有办法知道带有缺口和安全区域的设备的有用高度？

Answer 1

使用“反应本机安全区域上下文”

https://www.npmjs.com/package/react-native-safe-area-context#usesafeareainsets

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

function Screen() {
  const insets = useSafeAreaInsets();
  
  console.log(insets);
  //{"bottom": 34, "left": 0, "right": 0, "top": 48}

  return <View />;
}

Answer 2

正如@mohammed-ashfaq 所说，react-native-safe-area解决了这个问题。但是，它返回带有承诺的插图，我静态地需要这些值。

鉴于此，我创建了react-native-static-safe-area-insets，它可以将 insets 值作为常量访问。

Answer 3

您可以使用react-native-safe-area。它提供了获取安全区域插入顶部、底部、左侧、右侧的功能。

import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'

//Retrieve safe area insets for root view

SafeArea.getSafeAreaInsetsForRootView()
.then((result) => {
   console.log(result)
   // { safeAreaInsets: { top: 44, left: 0, bottom: 34, right: 0 } }
})