webentwicklung-frage-antwort-db.com.de

ionic3 Android-Statusleiste, kein Symbol angezeigt

Wenn ich meine ionische Projektversion aktualisiere, kann die Statusleiste der Android-App beim Aufrufen der App kein Symbol anzeigen:

 enter image description here

Beim Eintritt in die App:

 enter image description here

Wer weiß, wie man es löst? Meine Daten:

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

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

globale pakete:

cordova (Cordova CLI) : 7.1.0

lokale Pakete:

@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

System:

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

Umgebungsvariablen:

Android_HOME : not set

Sonstiges:

backend : legacy
androidangularcordovaionic3statusbar
6
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');
            }
        });
    }
}

Das hat mein Problem behoben.

6
Rifat Haque Amit

Ich habe mich mit gelöst 

statusBar.styleBlackOpaque();

anstatt 

statusBar.styleDefault();
4
emiska4

Ich fand das hilfreich. Sie können eine dieser drei Optionen in ionic 3 verwenden

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

Sie können auch eine für eine Hex-Code-Farbe verwenden

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

Dies für ein helles Thema, das eingebaut ist.

this.statusBar.styleLightContent();
1
user2929025

in Ihrer app.component.ts Überprüfen Sie, ob Sie dies getan haben 

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

Um sicherzugehen, führen Sie die folgenden Befehle aus.

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

Wenn das alles erledigt ist. Generiere dein Apk mit deinem Lieblingsbefehl oder du kannst es auch versuchen 

$ ionic cordova run Android --device
0
Melchia