在離子2應用程序中更改iOS狀態欄顏色

Question

我正在按照離子2文檔設置iOS狀態欄顏色，但它不起作用。狀態欄文本是白色的，這意味着在我的白色背景上它是不可見的。

我已經把我的應用程序的構造函數的代碼是：

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

我一直在使用進口的狀態欄：

import {StatusBar} from 'ionic-native';

我還檢查了cordova s​​tatusbar插件已安裝。

Answer 1

你可以嘗試這樣你要設置添加這個在config.xml，用顏色的十六進制值：

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

對於ngCordova或離子本地您可以使用

$cordovaStatusbar.styleColor('black'); 

    $cordovaStatusbar.styleHex('#000'); 

---

或者你看看狀態欄科爾多瓦插件GitHub的頁面上有一些方法來改變狀態欄的顏色：https://github.com/apache/cordova-plugin-statusbar

對於Android的：

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

對於iOS

在iOS 7，當你設置StatusBar.statusBarOverlaysWebView爲false，你可以通過設置顏色名狀態欄的背景顏色。

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，其中AA爲alpha值

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。（或任何它被稱爲）