離子標簽欄與主頁按鈕重疊（iPhone X - iOS 11）

Question

在 iOS 11 和 iPhone X 中， Apple 指定每個應用程序都應該位於“安全區域”（由於虛擬主頁按鈕）：

插入基本內容以防止剪輯。 [...] 為獲得最佳效果，請使用系統提供的標准界面元素和自動布局來構建界面。 所有應用程序都應遵守 UIKit 定義的安全區域和布局邊距，以確保根據設備和上下文進行適當的插入。 安全區域還可以防止內容與狀態欄、導航欄、工具欄和標簽欄重疊。

問題是 Ionic 應用程序 (v. 1) 的標簽欄覆蓋了屏幕的這一部分，因此該欄位於主頁按鈕下方：

有誰知道如何解決它？

（請注意：如果您在 iPhone X 模擬器中運行新的 Ionic 應用程序 v1，您將在窗口的頂部和底部獲得兩個黑色空間，但您可以防止在內部的元標記中添加“viewport-fit=cover”索引.html)

Answer 1

對於 Ionic 4 項目，這將是：
應用程序.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

您應該能夠將本答案中概述的相同原則應用於 Ionic v1 頁腳，即

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

（或類似的東西 - 我還沒有測試過）

Answer 3

對於 Ionic1 項目，我發現定位選項卡導航可以解決問題。

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

Answer 4

您可以向自定義 tabBar 主視圖添加約束以將其連接到底部 safeAreaLayoutGuide。

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