web-dev-qa-db-ja.com

Ionicアプリでトップバーのテキストの色を白に変更するにはどうすればよいですか？

私はこれを使用してヘッダーを暗い色に変更しました：

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

IOSで実行すると、上部のステータスバーのテキスト（時間、携帯通信会社、バッテリーなど）が黒くなり、暗い背景では見づらくなります。このテキストを白くするにはどうすればよいですか？

Black text on dark header color

ionic-frameworkionic
15
Ira Herman

プラグイン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();
_

プラグインのドキュメントを確認してください

33
manzapanza

ionic 4 with angular appでは、次のコードでステータスバーの色とテキストの色を変更できます ステータスバーのテキストを変更する方法色

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