[上級者向け]iOSキーボード出現時に<ion-footer>を隠さない

概要

キーボード出現時、Androidでは <ion-footer> を持ち上げる形でキーボードが出現します。しかし、iOSではなぜか <ion-footer> を隠す形でキーボードが出現します。これはIonic 2のかなり初期からのバグでして、

https://github.com/ionic-team/ionic/issues/7149
https://github.com/ionic-team/ionic/issues/12844
https://forum.ionicframework.com/t/ios-keyboard-overlap-ion-footer-and-moves-bottom-tabs/56060

と様々なIssueが上げられ、コミュニティ内で解決法が話し合われています。iOS10では動いたけどiOS11では動かない解決法などありまして、今のところ、以下のディレクティブを自作して操作するのが一番無難なのでご紹介します。

使い方

Directiveを作成する

ionic gコマンドでdirectiveを実行する。名前はkeyboard-attachで作成します。

Directiveを書き換える

自動的にsrc/directives/keyboard-attach/keyboard-attachが生成されます。中身を

に置き換えます。結構以前につくったものなので、selector名がデフォルトと違いますがご容赦ください。

利用するngModuleでDirectiveを読み込む

Directiveを利用するためには、Moduleで読み込む必要があります。例えば、LazyLoadingを実装しており、MessagePageModuleに追記するならこんな感じになります。

  import { NgModule } from '@angular/core';
  import { IonicPageModule } from 'ionic-angular';
  import { MessagePage } from './message';
+ import { DirectivesModule } from '@/directives/directives.module';

  @NgModule({
      declarations: [
          MessagePage,
      ],
      imports: [
          IonicPageModule.forChild(MessageUser),
+         DirectivesModule
      ],
      exports: [
          MessagePage,
      ]
  })
  export class MessagePageModule {}

ComponentsでDirectiveを使う

あとは、作成したts/htmlテンプレート内でDirecitiveを利用します。

@ViewChild(Content) content: Content;

<ion-footer [keyboardAttach]="content">
</ion-footer>

まとめ

実はこのDirectiveは完璧ではなく、キーボード出現時に一瞬Headerが下に落ちてからキーボードにあわせて上にあがってくるバグを抱えております。もし解決できましたら、日本語で大丈夫ですので

にコメントをいただけましたら幸いです。

それでは、また。