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（＆＃39;黑色＆＃39）
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();
});

尝试更改Ionic app状态栏文本颜色

4 个答案: