Ionic3のiOSアプリでステータスバーのオーバーレイ表示をしない方法

• OS: macOS High Sierra 10.13.4
• Xcode: 9.3 Build version 9E145
• Node.js: v8.9.3
• npm: v5.6.0
• cordova: v7.1.0
• Ionic: 3.20.0
• cordova-ios: 4.5.4

1. ステータスバー制御プラグインを追加

$ ionic cordova plugin add cordova-plugin-statusbar
$ npm install --save @ionic-native/status-bar

2. app.module.ts の providers に StatusBar を追加

src/app/app.module.ts

import { StatusBar } from '@ionic-native/status-bar';
...
    providers: [
        StatusBar,
    }
...

3. ステータスバーのオーバーレイ表示設定

src/app/app.component.ts

import { StatusBar } from '@ionic-native/status-bar';

public constructor(private platform: Platform, private statusBar: StatusBar) {
    this.initializeApp();
}

private initializeApp() {
    this.platform.ready().then(() => {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        this.statusBar.styleDefault();
    
        // ステータスバーのオーバーレイ表示設定
        this.statusBar.overlaysWebView(false);
    });
}