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

Question

我的应用程序在 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，状态栏颜色始终为黑色且不会更改。

Answer 1

假设您在离子原生项目的电容器中。您有两种选择：

Op 1.运行 npm install 以使用 cordova 软件包：npm install cordova-plugin-statusbar，然后运行ionic build --prod并npx cap sync android。查看文档以获取过时的科尔多瓦/电容器说明。

在这里，您有一个示例，状态栏可以使用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();
});
}
}

操作 2.没有科尔多瓦的电容器作为电容器已经给你状态栏对象 使用电容器芯状态栏：

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();
}
}

Answer 2

它对我有用。

我没有使用：

this.statusBar.styleDefault();

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

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