离子标签栏与主页按钮重叠（iPhone X - iOS 11）答案

【问题标题】：Ionic tab bar overlaps home button (iPhone X - iOS 11)离子标签栏与主页按钮重叠（iPhone X - iOS 11）
【发布时间】：2018-03-01 12:52:25
【问题描述】：

在 iOS 11 和 iPhone X Apple specified 中，每个应用都应该位于“安全区域”（由于虚拟主页按钮）：

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

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

有人知道怎么解决吗？

（请注意：如果您在 iPhone X 模拟器中运行新的 Ionic 应用程序 v1，您将在窗口的顶部和底部看到两个黑色空间，但您可以通过添加“viewport-fit=cover”来阻止这种情况index.html 中的元标记）

【问题讨论】：

标签： ios css cordova ionic-framework iphone-x

【解决方案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 用于旧版本。

【讨论】：

适用于 iOS14.5 iPhone 12 Pro Max

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

对于一个 Ionic1 项目，我发现以 tab-nav 为目标就可以了。

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

【讨论】：

【解决方案4】：

您可以向自定义 tabBar 主视图添加约束，以将其连接到底部 safeAreaLayoutGuide。

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

【讨论】：