React-Native 检测屏幕缺口

Question

我使用 nativebase.io 作为我的应用程序的 UI 框架。

我的问题

当我为 IOS 设备输入标题时，如果 iPhone 模拟器正在模拟 iPhone X（屏幕顶部有一个凹口），则 Header 元素会自动检测到这一点并将 Header 元素移动到屏幕下方。

一些 android 设备在屏幕顶部也有类似的缺口，但是当我使用 nativebase.io Header 元素时，它不会检测到缺口并且 Header 与缺口重叠。

我的问题

react-native 或 nativebase.io 有没有办法检测显示器是否有缺口？这样我可以动态偏移标题。

原文由 X0r0N 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于问题出在android上，也许您应该尝试查看StatusBar.currentHeight。由于缺口通常是状态栏的一部分，因此在标题顶部添加一个填充状态栏的大小可能应该这样做。

原文由 Filipe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不使用世博会

如果你使用的是没有 Expo 的 React Native，或者一个已经被弹出的 Expo 应用，你可以使用 react-native-device-info 包。它有一个 hasNotch() 功能，可以很好地检测此类设备。

The Native Base Content , Footer and Header components inspect an isIphoneX theme variable to determine whether or not to add spacing for a device notch .

您可以 自定义 Native Base 主题 并修改变量文件以使用 react-native-device-info 来检测缺口：

 # native-base-theme/variables/*.js
import DeviceInfo from 'react-native-device-info';
...
isIphoneX = DeviceInfo.hasNotch();
...

现在，您的 Native Base Header ， Footer 和 Content 组件应该为具有凹槽的设备添加适当的间距。

使用世博会

由于 react-native-device-info 不适用于 Expo 项目，因此没有简单的方法可以做到这一点。您将不得不编写一个函数来实现您的目标。如果您检查 hasNotch() 源代码，您会注意到该函数只是根据设备的 brand 和 model 进行数组查找。您可以使用 Expo Constants 获取设备模型，但它们并不容易：

 import { Platform } from 'react-native;
import Constants from 'expo-constants';

const getDeviceModel = () => Platform.select({
  ios: Constants.platform.ios.model,
  android: Constants.deviceName
});

但是，无法在 Expo 中获得设备 brand 。显然，所有 ios 设备的品牌都是 Apple ，但 Android 设备品牌更加难以捉摸。您可能能够构造一个仅使用设备 model 的查找数组，但它可能不那么准确。

我希望世博会用户有更好的解决方案。

原文由 Tom Aranda 发布，翻译遵循 CC BY-SA 4.0 许可协议