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

Question

使用 iOS 11 和 iPhone X Apple specified 每个应用程序都应该存在于 "safe area"（由于虚拟主页按钮）：

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，您将在 window 的顶部和底部得到两个黑色空间，但是您可以防止将 "viewport-fit=cover" 添加到 index.html)

内的元标记中

Answer 1

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

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

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

Answer 2

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

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

Answer 3

对于 Ionic1 项目，我发现定位选项卡导航可以达到目的。

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

Answer 4

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

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

Ionic tab bar overlaps home button (iPhone X - iOS 11)

ios

css

cordova

ionic-framework

iphone-x