Изменение цвета строки состояния iOS в приложении ionic 2

Question

Я следую документации ionic 2 для установки цвета панели состояния iOS, но она не работает. Текст строки состояния белый, что означает, что на моем белом фоне он невидим.

код я поместил в мое приложение конструктора:

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

я импортировал StatusBar с помощью:

import {StatusBar} from 'ionic-native';

Я также проверил, что установлен плагин status bar.

Answer 1

Вы можете попробовать, как это добавить это в config.xml, с шестнадцатеричным значением цвета вы хотите установить:

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

Для ngCordova или ионно-нативный вы можете использовать

$cordovaStatusbar.styleColor('black'); 

    $cordovaStatusbar.styleHex('#000'); 

---

Или проверить на странице плагина GitHub статусной Cordova есть несколько способов, чтобы изменить цвет строки состояния: https://github.com/apache/cordova-plugin-statusbar

для Android:

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

Для прошивки

КСНЫ 7, когда вы установили StatusBar.statusBarOverlaysWebView ложь, вы можете установить цвет фона статусного по имени цвета ,

StatusBar.backgroundColorByName("red"); 

Поддерживаемые названия цвета являются:

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

Или
Устанавливает цвет фона статусной с помощью шестнадцатеричной строки.

StatusBar.backgroundColorByHexString("#C0C0C0"); 

Также поддерживаются стенографические свойства CSS.

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). 

На WP7 и WP8 вы можете также указать значения как #AARRGGBB, где АА значение альфа-

Answer 2

Так что, если вы заинтересованы я реализовал директиву, которая будет обрабатывать строки состояния поведения цвет текста динамически через все приложения (не нужно беспокоиться, когда и где установить что-то):

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 
} 

Все, что вам нужно сделать, это включить эту директиву в вашем app.module.ts (или что бы там ни называлось)