Ionicアプリのステータスバーのテキストの色を変更しようとしています

Question

実際の解決策ではなく、これについて議論しているスレッドが複数あるようです。私はそれが簡単なものになることを望んでいました。基本的には、私がしたいのは、私のヘッダー/ navbar /ステータスバーが濃い青色なので、ステータスバーのテキストの色を変更するだけです。デフォルトのテキストの色は黒で、私はそれを白に変更したいだけです、それは簡単です。

ここでこれらの変更を行いますか？私はすでにステータスバーのプラグインをインストールしており、私の設定ファイルは以下の通りです（これはいくつかのスレッドで提案された変更なし）。

<preference name="webviewbounce" value="false" /> 
<preference name="UIWebViewBounce" value="false" /> 
<preference name="DisallowOverscroll" value="true" /> 
<preference name="android-minSdkVersion" value="16" /> 
<preference name="BackupWebStorage" value="none" /> 
<preference name="StatusBarStyle" value="default" /> 
<preference name="SplashScreen" value="screen" /> 
<preference name="orientation" value="portrait" /> 
<preference name="SplashMaintainAspectRatio" value="true" /> 
<preference name="FadeSplashScreenDuration" value="300" /> 
<preference name="ShowSplashScreenSpinner" value="false" /> 
<preference name="AutoHideSplashScreen" value="false" /> 
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" /> 
<preference name="SplashScreenDelay" value="3000" /> 

どうすればこの問題を解決できますか？

Answer 1

あなたはこれを行うことが暗い背景を使用している場合には、ステータスバーの背景に依存します。

platform.ready().then(() => { 
    // Okay, so the platform is ready and our plugins are available. 
    // Here you can do any higher level native things you might need. 
     StatusBar.styleLightContent(); 
}); 

私がテストするために私app.component.ts

のコンストラクタでこれを持っていますより多くのオプションあなたがapp.jsファイルでドキュメントhere

Answer 2

を確認することができ、これを適用します。

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard) 
    if (window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if (window.StatusBar) { 
     // org.apache.cordova.statusbar required 
     // StatusBar.styleDefault(); 
     StatusBar.style(1) 
    } 
    }); 
}) 

その他のオプションは次のとおりです。

• StatusBar.style(1) //ライト
• StatusBar.style(2) //
• Statusbar.styleColor（ '黒'）、ブラックブラック// StatusBar.style(3)
半透明、不透明
• Statusbar.styleHex('#FF0000')//レッド