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

Posted 2023-03-15

【中文标题】如何在 React Native 中知道 iOS 设备的有用高度？

【英文标题】：How to know the useful height of an iOS device in React Native?

【发布时间】：2018-11-15 12:55:13

【问题描述】：

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

我使用硬编码的“槽口高度”来计算这个有用的高度，但我发现槽口可以有不同的高度，具体取决于设备。 （iPhone XS 和 iPhone XS Max 相差 3 点）。

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

【参考方案1】：

使用'react-native-safe-area-context'

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

【参考方案2】：

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

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

【讨论】：

我不认为你需要这样做，但你的决心给我留下了深刻的印象！这种方式绝对最简单

我在我的一个项目中使用react-native-static-safe-area-insets，感谢您的惊人贡献。

谢谢。看到这个我也在用这个。

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

【讨论】：

谢谢！这很好用。我现在唯一的问题是 getSafeAreaInsetsForRootView 方法的返回是一个承诺，因为我想使用它来设置一些为整个应用程序导出的样式变量。

在 main.js 中等待它

我也有同样的问题。如何实现等待？

【参考方案4】：

您可以从Dimensions组件中获取用户的手机屏幕、宽度和高度。

import  Dimensions  from 'react-native'

const  width, height  = Dimensions.get('window'); // if you use the width you can get the screen width by pixels. And also height is the height pixels of the phone. 

const screenWidthSomePart = width * 0,6 // 有时你可以获得屏幕的百分比，所以你可以使用它。屏幕 %60

如果您想查看适用于 Iphone X 的保险箱。您可以使用 SafeAreaView 组件

import  SafeAreaView  from 'react-native'
 return(
 <SafeAreaView>
   ..... // your screen componenet
 </SafeAreaView>
); 

【讨论】：

在 iPhone XS 中，窗口高度包括凹槽的大小

【参考方案5】：

像那里一样使用“react-native”中的 Dimension 模块：

import  Dimensions, Platform, StatusBar  from 'react-native'

const windowHeight = Dimensions.get('window').height
const screenHeight = Dimensions.get('screen').height

【讨论】：

在 iPhone XS 中，window 和 screen 的高度是相同的，包括缺口的大小

查看RCTDeviceInfo.m，第75行显示：typeof (dimensions.window) window = dimensions.window; // Window and Screen are considered equal for ios.