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

Question

对于iOS 11和iPhone X Apple specified，每个应用都应该生活在一个安全的区域内。 （由于虚拟主页按钮）：

  

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

问题是一个Ionic app（v.1），标签栏覆盖了屏幕的这一部分，因此栏位于主页按钮下方：

有谁知道如何修复它？

（请注意：如果您在iPhone X模拟器中运行新的Ionic应用程序v1，您将在窗口的顶部和底部获得两个黑色空格，但您可以阻止此添加＆＃34; viewport-fit = cover＆ ＃34;到index.html内的元标记

Answer 1

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

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

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

Answer 2

对于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适用于较旧的iOS11版本。

Answer 3

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

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

Answer 4

对于Ionic1项目，我发现定位tab-nav可以解决这个问题。

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