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

Posted 2023-04-18

【中文标题】无法使用 IONIC 5 在 Android 中更改状态栏颜色

【英文标题】：Unable to change Statusbar color in Android using IONIC 5

【发布时间】：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

【参考方案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');