在 ionic 2 应用程序中更改 iOS 状态栏颜色

Question

我正在按照 ionic 2 文档设置 iOS 状态栏颜色，但它不起作用。状态栏文本是白色的，这意味着在我的白色背景上它是不可见的。

我在应用程序构造函数中输入的代码是：

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

我使用以下方法导入了 StatusBar：

import {StatusBar} from 'ionic-native';

我还检查了是否安装了 cordova 状态栏插件。

Answer 1

你可以这样尝试在 config.xml 中添加你想要设置的颜色的十六进制值：

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

对于 ngCordova 或 ionic-native 你可以使用

  $cordovaStatusbar.styleColor('black');

  $cordovaStatusbar.styleHex('#000');

或者您查看状态栏 cordova 插件 github 页面，有一些方法可以更改状态栏的颜色：https://github.com/apache/cordova-plugin-statusbar

对于Android：

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

对于iOS

关于iOS7，当你设置StatusBar.statusBarOverlaysWebView为false时，你可以通过颜色名称设置状态栏的背景颜色。

StatusBar.backgroundColorByName("red");

支持的颜色名称是：

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

或
通过十六进制字符串设置状态栏的背景颜色。

StatusBar.backgroundColorByHexString("#C0C0C0");

CSS shorthand 属性也受支持。

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

您需要做的就是将此指令包含在您的 app.module.ts（或任何名称）中。

这将在整个应用程序中动态处理状态栏文本颜色行为（无需担心何时何地进行设置）：

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
}

在 ionic 2 应用程序中更改 iOS 状态栏颜色

Change iOS status bar color in ionic 2 app

ios

cordova

ionic2