web-dev-qa-db-ja.com

Ionicタブバーがホームボタンと重なっている（iPhone X-iOS 11）

IOS11およびiPhoneXの場合 Apple指定 すべてのアプリは「安全な領域」に存在する必要があります（仮想ホームボタンのため）：

enter image description here

クリッピングを防ぐために重要なコンテンツを挿入します。[...]最良の結果を得るには、標準のシステム提供のインターフェイス要素と自動レイアウトを使用してインターフェイスを構築します。すべてのアプリは、UIKitで定義された安全領域とレイアウトマージンに準拠する必要があります。これにより、デバイスとコンテキストに基づいて適切な設定が保証されます。安全領域は、コンテンツがステータスバー、ナビゲーションバー、ツールバー、およびタブバーと重ならないようにします。

問題は、タブバーが画面のこの部分を覆っているIonic app（v。1）であるため、バーはホームボタンの下にあります。

enter image description here

誰かがそれを修正する方法を知っていますか？

（注意：iPhoneXシミュレーター内で新しいIonic app v1を実行すると、ウィンドウの上部と下部に2つの黒いスペースが表示されますが、これにより「ビューポート-」が追加されるのを防ぐことができます。 index.html内のメタタグにfit = cover "）

ioscsscordovaionic-frameworkiphone-x
9
Ernesto Schiavo

Ionic1プロジェクトの場合、タブナビゲーションをターゲットにすることでうまくいくことがわかりました。

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

この回答 で概説されているのと同じ原則をIonic v1フッターに適用できるはずです。

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

（または同様のもの-私はこれをテストしていません）

2
DaveAlden

カスタムtabBarメインビューに制約を追加して、下部のsafeAreaLayoutGuideに接続できます。

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

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は古いバージョン用です。

0
Javi Marzán