ionic3 android狀態欄未顯示圖標

Question

當我更新我的項目 ionic 版本時，android 應用程序的狀態欄在進入應用程序時無法顯示任何圖標：

進入應用程序時：

有誰知道怎么解決？ 我的信息：

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.17.0
ionic (Ionic CLI) : 3.17.0

全局包：

cordova (Cordova CLI) : 7.1.0 

本地包：

@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.3.0 ios 4.6.0-nightly.2017.11.22.24bfb734
Ionic Framework    : ionic-angular 3.8.0

系統：

ios-deploy : 1.9.2 
ios-sim    : 5.0.13 
Node       : v7.10.0
npm        : 5.5.1 
OS         : macOS Sierra
Xcode      : Xcode 9.0.1 Build version 9A1004 

環境變量：

ANDROID_HOME : not set

雜項：

backend : legacy

Answer 1

我已經解決了

statusBar.styleBlackOpaque();

代替

statusBar.styleDefault();

Answer 2

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

@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    constructor(public platform: Platform, public statusBar: StatusBar) {
        platform.ready().then(() => {
            statusBar.styleDefault();
            if (platform.is('android')) {
                statusBar.overlaysWebView(false);
                statusBar.backgroundColorByHexString('#000000');
            }
        });
    }
}

這解決了我的問題。

Answer 3

我發現這很有幫助。 您可以在 ionic 3 中使用這三個選項之一

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

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  constructor(public platform: Platform, public statusBar: StatusBar) {

    this.platform.ready().then(() => {
      // for Black
      if(this.platform.is('android')) {
        this.statusBar.styleBlackOpaque();
      }
    }
  }
}

您也可以使用一個作為十六進制代碼顏色

this.statusBar.backgroundColorByHexString('#fff');

這是一個內置的淺色主題。

this.statusBar.styleLightContent();

Answer 4

在你的 app.component.ts 檢查你有

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

@Component({
      templateUrl: 'app.html'
    })
    export class MyApp {

      constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
        platform.ready().then(() => {
          // Okay, so the platform is ready and our plugins are available.
          // Here you can do any higher level native things you might need.
          statusBar.styleDefault();
          splashScreen.hide();
        });
    }

為了安全起見，請運行以下命令。

$ ionic cordova plugin add cordova-plugin-statusbar
$ npm install --save @ionic-native/status-bar

當這一切都完成了。 用你最喜歡的命令生成你的 Apk 或者你也可以試試這個

$ ionic cordova run android --device  

Answer 5

更改statusBar.styleDefault()來statusBar.styleLightContent()在app.component.ts 。

Answer 6

安裝以下插件：

• 離子cordova插件添加cordova-plugin-statusbar
• npm install @ionic-native/status-bar

在您的 app.component.ts 中包含以下代碼

if (this.platform.is('android')) {
      this.statusBar.backgroundColorByHexString(<<STATUS_BAR_COLOR>>);
}

 import { Component } from "@angular/core"; import { Platform } from "@ionic/angular"; import { SplashScreen } from "@ionic-native/splash-screen/ngx"; import { StatusBar } from "@ionic-native/status-bar/ngx"; import { TranslateService } from "@ngx-translate/core"; import { EventProvider } from "./event-provider.service"; @Component({ selector: "app-root", templateUrl: "app.component.html" }) export class AppComponent { constructor( private translate: TranslateService, private platform: Platform, private splashScreen: SplashScreen, private statusBar: StatusBar, private eventProvider: EventProvider ) { this.initializeApp(); this.eventProvider.currentLang.subscribe(lang => { this.translate.use(lang); }); if (this.platform.is('android')) { this.statusBar.backgroundColorByHexString('#04b9fe'); } } initializeApp() { this.platform.ready().then(() => { this.statusBar.styleDefault(); this.splashScreen.hide(); }); } }

Answer 7

在 Ionic 4 應用程序中顯示狀態欄

import { StatusBar } from '@ionic-native/status-bar/ngx';
    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.scss']
    })
    export class AppComponent {
      constructor(
        private platform: Platform,
        private statusBar: StatusBar,
      ) {
        this.initializeApp();
    
      }
      initializeApp() {
        this.platform.ready().then(() => {
          this.statusBar.show();
      }
     }
    }