ios - Ionic 标签栏与主页按钮重叠(iPhone X - iOS 11)

Question

使用 iOS 11 和 iPhone X Apple specified每个应用程序都应该位于“安全区域”(由于虚拟主页按钮):

Inset essential content to prevent clipping. [...] For best results, use standard, system-provided interface elements and Auto Layout to construct your interface. All apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar.

问题是 Ionic 应用程序 (v. 1) 的选项卡栏覆盖了屏幕的这一部分，因此该栏位于主页按钮下方:

有人知道怎么解决吗？

(请注意:如果您在 iPhone X 模拟器中运行一个新的 Ionic 应用程序 v1，您将在窗口的顶部和底部看到两个黑色空间，但是您可以防止这种情况在您的index.html 中的元标记)

Answer 1

对于 Ionic 4 元素，这将是:
app.scss

body {
  margin-top: env(safe-area-inset-top);
  margin-top: constant(safe-area-inset-top);
}

ion-tab-bar {
  margin-bottom: env(safe-area-inset-bottom);
}

env 用于较新的 iOS11 版本，constant 用于旧版本。