无法使用 IONIC 5 在 Android 中更改状态栏颜色答案

【问题标题】：Unable to change Statusbar color in Android using IONIC 5无法使用 IONIC 5 在 Android 中更改状态栏颜色
【发布时间】：2020-10-02 18:00:22
【问题描述】：

我的应用在 IONIC 5 中，我正在使用以下代码更改 app.component.ts file 中的状态栏颜色。

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

export class AppComponent {

  constructor(
    ...
    private statusBar: StatusBar
    ...
  ) {
    this.initializeApp();
  }

  initializeApp() {
      ...
      this.statusBar.styleDefault();
      this.statusBar.backgroundColorByHexString('#ffffff');
      ...
  }
}

似乎IOS会自动更改与工具栏匹配的状态栏颜色，即使我没有在代码中更改它，但对于Android，状态栏颜色始终是黑色并且不会改变。

【问题讨论】：

请分享你的 package.json

标签： android ionic-framework colors statusbar ionic5

【解决方案1】：

假设您在 ionic Native 项目中使用电容器。你有两个选择：

Op 1. 运行 npm install 以使用 cordova 包：npm install cordova-plugin-statusbar，然后运行 ionic build --prod 和 npx cap sync android。 check the docs 获取过时的科尔多瓦/电容器说明。

这里有一个示例，状态栏与 OnInit 和平台准备就绪，您可以选择。

import { Component, OnInit } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent  implements OnInit {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  ngOnInit() {
   // Dont mix, choose OnInit or platform ready
   //this.statusBar.backgroundColorByHexString('#ffffff');
  }

  initializeApp() {
    this.platform.ready().then(() => {  
      this.statusBar.overlaysWebView(false);
      this.statusBar.backgroundColorByName("yellow");
      this.splashScreen.hide();
    });
  }
}

Op 2. 没有 cordova 作为电容器的电容器已经为您提供了 StatusBar 对象 Use Capacitor Core Status Bar:

import {
  Plugins,
  StatusBarStyle,
} from '@capacitor/core';

const { StatusBar } = Plugins;

export class StatusBarExample {
  isStatusBarLight = true

  changeStatusBar() {
    StatusBar.setStyle({
      style: this.isStatusBarLight ? StatusBarStyle.Dark : StatusBarStyle.Light
    });
    this.isStatusBarLight = !this.isStatusBarLight;

    // Display content under transparent status bar (Android only)
    StatusBar.setOverlaysWebView({
      overlay: true
    });
    
    StatusBar.setBackgroundColor({color:"#215E96"})

  }

  hideStatusBar() {
    StatusBar.hide();
  }

  showStatusBar() {
    StatusBar.show();
  }
}

【讨论】：

【解决方案2】：

它对我有用。

我没有使用：

this.statusBar.styleDefault();

只有 app.component.ts 文件中的下一个代码：

export class AppComponent implements OnInit{
ngOnInit() {
    this.statusBar.backgroundColorByHexString('#ffffff');
  }
}

【讨论】：