Ionic4设置沉浸式状态栏

设置沉浸式状态栏体验比较好，而且有些页面设计需要频繁的改变状态栏的颜色，如果不使用沉浸式，就需要页面离开和进入单独设置状态栏背景色，这就导致会有一个非常明显的过度问题，但是使用沉浸式就可以避免这个问题，因为沉浸式状态下状态栏是透明的，只需要设置ion-header的背景色就可以了。
app.component.ts中设置：

this.statusBar.styleLightContent(); // 深色文本
this.statusBar.overlaysWebView(true);

到这一步，IOS就可以了，不用再设置其他的东西，但是Android还需要，如不设置，在Android中，页面头部就会和状态栏重叠，还需要设置padding-top将内容顶下来，我是使用指令来实现的：

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
@Directive({
  selector: '[appOverlayPadding]',
  exportAs: 'appOverlayPadding'
})
export class StatuabrOverlayPaddingDirective implements OnInit {

  @Input('appOverlayPadding') options: {
    top?: string;
  };
  constructor(
    private ele: ElementRef,
    private platform: Platform,
  ) {
  }

  ngOnInit() {
    this.setPaddingTop();
  }
  // 适配 沉浸式状态下 statusbar将header遮住的情况，
  setPaddingTop() {
    if (this.platform.is('android')) {
      this.ele.nativeElement.style.paddingTop = this.options && this.options.top ? this.options.top : '25px';
    }
  }
}

引用：

<ion-header>
  <ion-toolbar color="primary" appOverlayPadding>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>商品描述</ion-title>
  </ion-toolbar>
</ion-header>

然后，有的Android机中，页面一打开，不会立即切换成沉浸式，需要手动触发，比如input获取焦点，所以需要在statusbar插件源码中加点东西：

platforms/android/app/src/main/java/org/apache/cordova/statusbar/Statusbar.java中59行加入：

window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
window.setNavigationBarColor(Color.WHITE); // 设置底部虚拟导航栏的背景色