Ionic4 5沉浸式状态栏：适配全面屏

1. 在platforms/android/app/src/main目录中找到AndroidManifest.xml文件，修改文件中manifest → application → activity标签的android:theme属性：

<!-- 
  设置全屏显示：
      默认值：android:theme="@android:style/Theme.DeviceDefault.NoActionBar"
      修改后：android:theme="@android:style/Theme.DeviceDefault.NoActionBar.Fullscreen"
 -->
<activity android:theme="@android:style/Theme.DeviceDefault.NoActionBar.Fullscreen" ... >
    ....
</activity>

2. 在app.component.ts文件中进行配置：

import { Component } from ‘@angular/core‘;

import { StatusBar } from ‘@ionic-native/status-bar/ngx‘;
import ....;

@Component({
    selector: ‘app-root‘,
    templateUrl: ‘app.component.html‘,
    styleUrls: [‘app.component.scss‘]
})
export class AppComponent {
    constructor(private platform: Platform, private splashScreen: SplashScreen, private statusBar: StatusBar) {
        this.initializeApp();
        // 在构造函数中添加这两句代码
        this.statusBar.styleLightContent();
        this.statusBar.overlaysWebView(true);
    }

    initializeApp() {
        this.platform.ready().then(() => {
            this.statusBar.styleDefault();
            this.splashScreen.hide();
        });
    }
}

修改完成后就可以打包看效果了，目前仅在Android端测试没问题，IOS请自行测试

Ionic4 5沉浸式状态栏：适配全面屏

原文：https://www.cnblogs.com/hanzhe/p/14306429.html