React-Native Detect Screen Notch

Question

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

我的问题

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

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

我的问题

是否有一种方法在react-native或nativebase.io上检测显示是否有缺口？这样我就能动态地偏移Header.

Answer 1

不使用世博会

如果您使用的是没有 Expo 的 React Native，或者已弹出的 Expo 应用程序，则可以使用该react-native-device-info包。它具有hasNotch()在检测此类设备方面效果很好的功能。

该天然碱基Content，Footer和Header组分检查一个isIphoneX主题变量来确定是否要添加间距为设备缺口。

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

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

现在你的天然碱基Header，Footer和Content组件应该添加适当的间距有缺口的设备。

使用世博会

由于react-native-device-info不适用于世博项目，因此没有简单的方法可以做到这一点。您将不得不编写一个函数来实现您的目标。如果您检查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
});

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

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

Answer 2

我正在使用这个答案/sf/answers/3751514721/ 中的方法，它对我来说很好用。

在 React Native 中看起来像

import { StatusBar, Platform } from 'react-native';

if (Platform.OS === 'android') {
  const hasNotch = StatusBar.currentHeight > 24;
}

Answer 3

安全区域视图是前往的方法。

SafeAreaView 的目的是在设备的安全区域边界内呈现内容。目前仅适用于 iOS 版本 11 或更高版本的 iOS 设备。

https://reactnative.dev/docs/safeareaview

Answer 4

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