如何在我的Ionic App中将顶栏文本颜色更改为白色？

Question

我使用以下方法将标题更改为更暗的颜色：

<ion-nav-bar class="bar-royal">

当我在ios上运行时，顶部的状态栏文本（时间，载体，电池等）是黑色的，在深色背景上很难看到。如何将此文本设为白色？

Answer 1

使用插件statusbar和ngCordova非常简单：

var app = angular.module('ionicApp', ['ionic', 'ngCordova']);

app.run(function($cordovaStatusbar) {
  $cordovaStatusbar.overlaysWebView(true);

  $cordovaStatusBar.style(1); //Light
  $cordovaStatusBar.style(2); //Black, transulcent
  $cordovaStatusBar.style(3); //Black, opaque
});

看看这里的全文： http://learn.ionicframework.com/formulas/customizing-the-status-bar/

更新 - 没有ngCordova：

默认的Ionic项目附带了状态栏插件。如果您在内部有此声明，则可能您的项目已经运行：

if(window.StatusBar) {
  StatusBar.styleDefault();
}

所以代码变成了：

var app = angular.module('ionicApp', ['ionic']);

app.run(function() {
    if(window.StatusBar) {
      StatusBar.overlaysWebView(true);
      StatusBar.style(1); //Light
      StatusBar.style(2); //Black, transulcent
      StatusBar.style(3); //Black, opaque
    }
});

更新II

使用cordova-plugin-statusbar的新版本2.x时，StatusBar.style()方法已被这些新方法替代：

StatusBar.styleLightContent();
StatusBar.styleBlackTranslucent();
StatusBar.styleBlackOpaque();

Check the plugin's documentation

Answer 2

在带有角度应用程序的ionic 4中，我们可以通过以下代码how to change status bar's text color

更改状态栏颜色及其文本颜色。

this.platform.ready().then(() => {
  this.splashScreen.hide();
  this.statusBar.overlaysWebView(true);
  this.statusBar.styleDefault();
});