web-dev-qa-db-ja.com

ionic3 Androidステータスバーにアイコンは表示されません

プロジェクトを更新するときionic version、Android app have status bar ca n't show any icon when any enter the app：

enter image description here

アプリに入るとき：

enter image description here

誰でも解決方法を知っていますか？私の情報：

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
androidangularcordovaionic3statusbar
15
Nulra
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) {
        platform.ready().then(() => {
            statusBar.styleDefault();
            if (platform.is('Android')) {
                statusBar.overlaysWebView(false);
                statusBar.backgroundColorByHexString('#000000');
            }
        });
    }
}

これで問題が解決しました。

6
Rifat Haque Amit

私は解決しました

statusBar.styleBlackOpaque();

の代わりに

statusBar.styleDefault();
4
emiska4

これは役に立ちました。 ionic 3では、これら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();
      }
    }
  }
}

16進コードの色にも使用できます

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

これは、組み込まれている明るい色のテーマ用です。

this.statusBar.styleLightContent();
1
user2929025

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
0
Melchia

以下のプラグインをインストールします。

  • ionic Cordovaプラグインはcordova-plugin-statusbarを追加します
  • npm install @ ionic-native/status-bar enter image description here

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

_app.component.ts_のstatusBar.styleDefault()をstatusBar.styleLightContent()に変更します。

0
Sushant