Loading

Ionic5沉浸式状态栏 适配全面屏

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请自行测试

posted @ 2021-01-21 09:51  Java小学生丶  阅读(675)  评论(0)    收藏  举报