イオンイオンヘッダーバーのスタイルが壊れています

Question

イオンフレームワークを使用してiOSとAndroidでアプリケーションを構築しています。 問題は、Androidで通常実装されているイオンヘッダーバーのスタイルがiOS上で非常に壊れていることです。 以下は携帯電話のスクリーンショットです。

{左：右IOS：アンドロイド}

以下はSafariでデバッグメインページです。

青色で網掛けされた領域は、ヘッダーバーの領域です。

私は別にiOS用に指定したオプションがあるのだろうか。またはオーバーライドスタイル。

Answer 1

私はsassファイルをオーバーライドして問題を解決しました。 ionic.app.sassファイルに追加されたスタイルコードを以下に示します。

.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) 
    height: 84px 
    .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper 
    margin-top: 19px !important 
    .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * 
    margin-top: 20px 

.platform-ios.platform-cordova:not(.fullscreen) .has-header, 
.platform-ios.platform-cordova:not(.fullscreen) .bar-subheader 
    top: 84px 

ありがとう。

Answer 2

<ion-header-bar>の代わりに<ion-header>を使用する必要があると思います。また、htmlファイル内の同じタグを閉じます。

私のプロジェクトでは、<ion-header>で問題なく動作します。

タグを記述するための提案： -

あなたはその時点で書き込みのためのタグ<ion-header>を行くとき、それは可能なフレームワークすることができ、あなたにこのタグの提案を与えることはありません。次に、指定したタグを書き、試してみることもできます。

ホッピーはあなたのために働くでしょう。