Ändern iOS Statusleiste Farbe in ionic 2 App

Question

Ich befolge die ionische 2 Dokumentation für die Einstellung der iOS-Statusleiste Farbe, aber es funktioniert nicht. Der Text der Statusleiste ist weiß, was bedeutet, dass er auf meinem weißen Hintergrund unsichtbar ist.

Der Code, den ich in meiner app Konstruktor gesetzt haben, ist:

StatusBar.overlaysWebView(true); 
 
    StatusBar.styleDefault();

I StatusBar mit importiert haben:

import {StatusBar} from 'ionic-native';

Ich habe auch überprüft, dass das cordova statusbar Plugin installiert ist.

Answer 1

Sie können wie diese versuchen, dieses Add im config.xml, mit dem Hex-Wert der Farbe, die Sie festlegen möchten:

<preference name="StatusBarOverlaysWebView" value="false" /> 
<preference name="StatusBarBackgroundColor" value="#000000" /> 

Für ngCordova oder ionische-native können Sie

verwenden

$cordovaStatusbar.styleColor('black'); 

    $cordovaStatusbar.styleHex('#000'); 

---

Oder Sie überprüfen auf der Statusbar cordova Plugin github Seite gibt es einige Möglichkeiten, um die Farbe der Statusleiste zu ändern: https://github.com/apache/cordova-plugin-statusbar

Für Android:

if (cordova.platformId == 'android') { 
    StatusBar.backgroundColorByHexString("#333"); 
} 

Für iOS

auf iOS 7, wenn Sie StatusBar.statusBarOverlaysWebView auf false gesetzt, können Sie die Hintergrundfarbe der Statusbar von Farbnamen gesetzt .

StatusBar.backgroundColorByName("red"); 

Unterstützte Farbnamen sind:

black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown 

Oder
Legt die Hintergrundfarbe des statusbar durch einen Hex-String.

StatusBar.backgroundColorByHexString("#C0C0C0"); 

CSS-Kurzschreibeigenschaften werden ebenfalls unterstützt.

StatusBar.backgroundColorByHexString("#333"); // => #333333 
StatusBar.backgroundColorByHexString("#FAB"); // => #FFAABB 
On iOS 7, when you set StatusBar.statusBarOverlaysWebView to false, you can set the background color of the statusbar by a hex string (#RRGGBB). 

Auf WP7 und WP8 können Sie auch Werte wie #AARRGGBB angeben, wo AA ein Alpha-Wert

Answer 2

Also, wenn Sie daran interessiert sind ich eine Richtlinie umgesetzt haben, die dynamisch Statusleiste Textfarbe Verhalten behandelt durch die gesamte Anwendung (kein Grund zur Sorge, wann und wo etwas eingestellt):

import { Directive, ElementRef, OnDestroy, OnInit, Optional } from '@angular/core' 
import { StatusBar } from '@ionic-native/status-bar' 
import { Platform, ViewController } from 'ionic-angular' 

@Directive({ 
    /* tslint:disable */ 
    selector: "ion-header", 
    /* tslint:enable */ 
}) 
export class DynamicStatusBarDirective implements OnInit, OnDestroy { 
    public static isColorTooLight(colorString) { 
    let rgb = DynamicStatusBarDirective.getRgbColor(colorString) 

    if (rgb.a || (rgb.a < 0.2)) { // becoming too transparent 
     return true 
    } 

    // contrast computation algorithm/approach: https://24ways.org/2010/calculating-color-contrast 
    let yiq = ((rgb.r * 299) + (rgb.g * 587) + (rgb.b * 114))/1000 
    return yiq >= 128 
    } 

    public static getRgbColor(colorString): RGB { 
    if (!colorString) { 
     return null 
    } 

    let rgb: RGB = new RGB() 

    if (colorString[ 0 ] === '#') { // seems hex color 
     rgb.r = parseInt(colorString.substr(0, 2), 16) 
     rgb.g = parseInt(colorString.substr(2, 2), 16) 
     rgb.b = parseInt(colorString.substr(4, 2), 16) 
    } else { 
     let matchColors = /rgba?\(((25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,\s*?){2}(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,?\s*([01]\.?\d*?)?\)/ 
     let colors = matchColors.exec(colorString) 
     if (colors) { 
     rgb.r = parseInt(colors[ 1 ], 10) 
     rgb.g = parseInt(colors[ 2 ], 10) 
     rgb.b = parseInt(colors[ 3 ], 10) 

     if (colors[ 4 ]) { // has transparency 
      rgb.a = parseInt(colors[ 4 ], 10) 
     } 
     } 
    } 

    return rgb 
    } 

    public static getModalParent(nativeElm) { 
    return nativeElm 
     .parentNode // modal 
     .parentNode // modal wrapper 
     .parentNode // ion-modal 
     .parentNode // ion-app, which handles background status bar 
    } 

    public static getHeaderBackgroundForMobile(nativeElm) { 
    let header = nativeElm.querySelector('.toolbar-background') 
    return window.getComputedStyle(header).backgroundColor 
    } 

    public ionViewEnterCallback: Function 
    public modalCloseCallback: Function 

    constructor(
    public platform: Platform, 
    public statusBar: StatusBar, 
    public elm: ElementRef, 
    @Optional() public viewCtrl: ViewController, 
) { 
    } 

    public ngOnInit(): void { 
    this.ionViewEnterCallback =() => this.checkStatusBar() 
    if (this.viewCtrl) { 
     this.viewCtrl.willEnter.subscribe(this.ionViewEnterCallback) 
    } 
    } 

    public ngOnDestroy(): void { 
    this.viewCtrl.willEnter.unsubscribe() 
    this.viewCtrl.didLeave.unsubscribe() 
    } 

    public checkStatusBar(): void { 
    if (!this.platform.is('ios')) { 
     return 
    } 

    let nativeElm = this.elm.nativeElement 

    if (this.viewCtrl.isOverlay) { // dealing with modal 
     let parentNativeElm = DynamicStatusBarDirective.getModalParent(nativeElm) 

     if (parentNativeElm) { // modal is open 
     this.modalCloseCallback =() => this.setColor(window.getComputedStyle(parentNativeElm).backgroundColor) 

     this.viewCtrl.didLeave.subscribe(this.modalCloseCallback) 
     } 

     if (this.platform.is('tablet')) { 
     this.setColor(true) // for modals we are getting grey overlay, so need to set white background 
     return 
     } 
    } 

    let background = DynamicStatusBarDirective.getHeaderBackgroundForMobile(nativeElm) 

    if (background) { 
     this.setColor(background) 
    } 

    } 

    public setColor(background: any): void { 
    let isTooLight = DynamicStatusBarDirective.isColorTooLight(background) 

    if (isTooLight) { 
     this.statusBar.styleDefault() 
    } else { 
     this.statusBar.styleBlackTranslucent() 
    } 
    } 
} 

class RGB { 
    r: number 
    g: number 
    b: number 
    a?: number 
} 

Alles, was Sie tun müssen, ist diese Richtlinie in Ihrem app.module enthalten.ts (oder wie auch immer es heißt)