Question

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

我的问题

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

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

我的问题

react-native或nativebase.io上是否有办法检测显示是否有缺口？这样，我可以动态抵消页眉。

Answer 1

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

Answer 2

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

在React Native中看起来像

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

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

Answer 3

不使用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在Expo项目中不起作用，因此没有简单的方法来执行此操作。您将必须编写一个函数来实现您的目标。如果您检查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进入Expo。显然，所有ios设备都具有Apple品牌，但Android设备品牌则难以捉摸。您也许可以构造仅使用设备model的查找数组，但可能不那么精确。

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

Answer 4

前往“安全区域视图”。

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

https://reactnative.dev/docs/safeareaview

Answer 5

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

allow(GoogleMapsService::Client).to receive(:new)

Answer 6

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

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

Answer 7

我创建了一个获取缺口高度的函数

getNotchHeight = () => {
    let notchHeight = 0;
    if (Platform.OS == 'ios') {
        if (getStatusBarHeight() == 20) {
            notchHeight = 25;
        }
        else if (getStatusBarHeight() > 20) {
            notchHeight = getStatusBarHeight()+34;
        }
    }
    else if (Platform.OS == 'android') {
        if (getStatusBarHeight() > 25) {
            notchHeight = 0;
        }
        else {
            notchHeight = getStatusBarHeight();
        }
    }
    return notchHeight;

}

反应本机检测屏幕缺口

我的问题

我的问题

7 个答案: