React-Native Detect Screen Notch

Question

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

My issue

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

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

My question

是否有一种方法在react-native或nativebase.io上检测显示是否有缺口？这样我可以动态地偏移标题。

Answer 1

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

Answer 2

不使用世博会

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

Native Base Content，Footer和Header组件检查isIphoneX主题变量，以确定是否为设备缺口添加间距。

您可以customized your Native Base theme并修改您的变量文件以使用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不适用于世博项目，因此没有一种简单的方法可以做到这一点。您必须编写一个功能来实现您的目标。如果你检查hasNotch() source code，你会发现该函数只是根据设备的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
});

然而，没有办法在世博会上获得设备brand。显然，所有ios设备都有Apple品牌，但Android设备品牌更难以捉摸。您可能能够构建仅使用设备model的查找数组，但它可能不那么准确。

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

Answer 3

尝试使用React Native上提供的SafeAreaView。包装您当前的视图。有关更多信息，请参阅此链接：https://facebook.github.io/react-native/docs/safeareaview

<SafeAreaView style={{flex: 1}}>
   [...Your view component]
</SafeAreaView>