Ionic选项卡栏与home按钮重叠（iPhone X-iOS 11）

对于iOS 11和iPhone X，每个应用程序都应该位于“安全区域”（由于虚拟主按钮）：

插入必要内容以防止剪切。[…]为获得最佳效果，请使用标准、系统提供的界面元素和自动布局来构建界面。所有应用程序都应遵守UIKit定义的安全区域和布局边距，以确保根据设备和上下文进行适当的插入。安全区域还可以防止内容在状态栏、导航栏、工具栏和选项卡栏的下方

问题是一个带有选项卡栏的Ionic应用程序（第1节）覆盖了屏幕的这一部分，因此该栏位于主页按钮下方：

有人知道怎么修吗

---

（请注意：如果您在iPhone X模拟器中运行新的Ionic app v1，您将在窗口的顶部和底部获得两个黑色空格，但您可以防止在index.html内的元标记中添加“viewport fit=cover”）

您应该能够应用Ionic v1页脚中概述的相同原则，即

.bar-footer {
    margin-bottom: constant(safe-area-inset-bottom);
}

---

（或者类似的东西-我还没有测试过）

您可以向自定义选项卡栏主视图添加一个约束，将其连接到底部安全区域布局指南

yourView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true

---

对于Ionic1项目，我发现以tab nav为目标实现了这一点

.tab-nav {
    margin-bottom: constant(safe-area-inset-bottom);
}

---

对于爱奥尼亚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

适用于较旧的版本。

适用于iOS14.5 iPhone 12 Pro Max