React-Native 检测屏幕缺口 [英] React-Native Detect Screen Notch

问题描述

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

I am using nativebase.io as the UI framework for my app.

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

when I input a header for an IOS device, if the iPhone simulator is simulating iPhone X, (where there is a notch on the top of the screen), the Header element automatically detects this and moves the Header element lower on the screen.

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

some android devices also have a similar notch at the top of the screen, but when I use a nativebase.io Header element, it doesn't detect the notch and the Header overlaps the notch.

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

is there a way on react-native or nativebase.io to detect if the display has a notch? this way I could dynamically offset the Header.

推荐答案

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

Since the problem is on android, maybe you should try looking into StatusBar.currentHeight. Since the notch generally is part of the status bar, adding a padding on top of the header the size of the status bar should probably do it.

这篇关于React-Native 检测屏幕缺口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！