React-Native 检测屏幕缺口答案

【问题标题】：React-Native Detect Screen NotchReact-Native 检测屏幕缺口
【发布时间】：2018-08-15 12:35:26
【问题描述】：

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

我的问题

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

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

我的问题

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

【问题讨论】：

我认为 NativeBase 应该在自己的替代品上实现它，将尝试使用来自 react-native 的 SafeAreaView。
感谢您的回复。 SafeAreaView 不适用于安卓系统。在官方文档上，它还说It is currently only applicable to iOS devices.
谢谢，我想这对你有帮助-developer.android.com/reference/android/view/…我的意思是，用这个api写react api并在JS方法中使用。
你能告诉Android设备你正在尝试这种情况吗
@SupriyaKalghatgi 我正在使用 OnePlus 6 开发

标签： react-native native-base

【解决方案1】：

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

【讨论】：

谢谢！这行得通。为了更具体地了解解决方案，我使用了<Header style={{ marginTop: StatusBar.currentHeight }}>。文档可以是HERE
如果我们隐藏StatusBar，它就不起作用了。这需要知道设备是否有缺口才能显示顶部填充
@TomSawyer 我相信不可能知道它，因为它是计算状态栏高度的本机。如果你的用例需要它完全黑/白，使用backgroundColor="black" 和barStyle="dark-content" 或类似的白色就可以了。但是，如果您想在该空间中显示内容，则必须暂时显示状态栏，计算其高度，然后保存并隐藏栏，或者自定义本机代码。

【解决方案2】：

不使用 Expo

如果你使用没有 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
});

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

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

【讨论】：

如果Android通过React Native访问StatusBar.currentHeight，无论Expo如何（并且检测到凹口的高度）。不需要这个解决方案。如果是 iOS，您的解决方案很有帮助，而且品牌名称也很简单 :)
其实在 iOS >= 11 中可以使用 SafeAreaView。对于较旧的 iOS，手机很可能没有缺口，因此您可以使用固定的上边距。
isIphoneX 来自原生基础，对我有用。我为 Android 添加了值为 StatusBar.currentHeight 的边距，为没有缺口的 iOS 添加了 20px 的边距。对于那些有缺口的iOS，保持在0保证金。感谢您的回复，帮了大忙！
仅供参考，有些 Android 设备带有缺口。想到华为 P20 gsmarena.com/huawei_p20-9107.php ，所以 isIphoneX 的名称不正确。
@Sandy，没错，但这是 Native Base 使用的变量名（或者至少是他们在撰写这篇文章时使用的变量）。

【解决方案3】：

我正在使用这个答案https://stackoverflow.com/a/53593067/923497 中的方法，它对我来说效果很好。

在 React Native 中看起来像

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

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

【讨论】：

@msmfsd 不幸的是，我认为没有适用于所有现有设备的通用解决方案。所以我在我的项目中使用的解决方案是来自答案和硬编码电话模型的解决方案，这些都是例外。

【解决方案4】：

安全区域视图是必经之路。

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

https://reactnative.dev/docs/safeareaview

【讨论】：

【解决方案5】：

我一直在使用这个库“react-native-status-bar-height”并且效果很好。

https://www.npmjs.com/package/react-native-status-bar-height

【讨论】：