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

Question

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

androidiosangularjsionic-frameworkionic2

3

有很多帖子讨论了这个问题，但没有真正的解决方案。我希望这是一件简单的事情。基本上，我想做的就是更改状态栏文本颜色，因为我的标题/导航栏/状态栏是深蓝色的。默认的文本颜色是黑色，我只想将其更改为白色，就是这么简单。

我在哪里进行更改？我已经安装了状态栏插件，我的配置文件如下（这是没有进行任何更改建议的情况下）。

<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" />

我该怎么解决这个问题？

- bluewavestudio

4个回答

5

您可以使用以下代码来实现黑色文字白色背景。

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

点击此链接查看输出结果

如果想要在黑色背景中显示白色文本，可以尝试以下代码。

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

在此处查看代码输出

- RoboMex

0

在 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('black')
Statusbar.styleHex('#FF0000') // 红色

- Jonathan Brizio

2

这将设置背景颜色而不是文本。 - Jean Guzman

没错！我修改了一下使我的回答更完整。谢谢。 - Jonathan Brizio

-1

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

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

- Shashank Singh

只包含代码的答案不被视为完整答案。 - Ivan Kaloyanov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jean Guzman · Accepted Answer

这取决于状态栏的背景。如果您使用的是深色背景，则可以按照以下方式操作：

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的构造函数中有这段代码。

如果您想测试更多选项，可以在此处查看文档。