尝试更改 Ionic 应用程序状态栏文本颜色

Question

似乎有多个线程在讨论这个问题，但没有任何真正的解决方案。我希望这会是直截了当的事情。基本上，我要做的就是更改状态栏文本颜色，因为我的标题/导航栏/状态栏是深蓝色。默认文本颜色是黑色，我只想把它改成白色，就这么简单。

我在哪里进行这些更改？我已经安装了状态栏插件，并且我的配置文件在下面（在某些线程中没有任何建议的更改）。

<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 的构造函数中有这个

要测试更多选项，您可以查看文档here

Answer 2

对于白色背景的黑色文本，您可以使用以下代码。

initializeApp() {
    this.platform.ready().then(() => {
         this.statusBar.backgroundColorByName('white');
         this.statusBar.styleDefault();
         this.splashScreen.hide();     
    });
}  

Check the output in this link

对于黑色背景的白色文本，您可以尝试以下代码。

initializeApp() {
    this.platform.ready().then(() => {
         this.statusBar.backgroundColorByName('black');
         this.statusBar.styleLightContent()
         this.splashScreen.hide();     
    });
}  

Check code output here

Answer 3

在app.js 文件中，应用这个：

.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.style(3) // 黑色，不透明
• Statusbar.styleColor('黑色')
• Statusbar.styleHex('#FF0000') // 红色

Answer 4

要更改状态栏样式，请参考 ionic doc https://ionicframework.com/docs/v3/native/status-bar/

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