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

Question

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

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

问题是一个离子应用程序(v.1),标签栏覆盖屏幕的这一部分,因此栏位于主页按钮下:

有谁知道如何修理它？

(请注意:如果您在iPhone X模拟器中运行新的Ionic app v1,您将在窗口的顶部和底部获得两个黑色空格,但是您可以阻止在内部的元标记中添加"viewport-fit = cover"的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适用于较旧的版本。

Answer 2

对于 Ionic1 项目，我发现定位选项卡导航可以解决问题。

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