Ionic 2/3中修改StatusBar文字颜色的方法咨询

嘿，这个问题我之前做Ionic 3项目的时候刚好折腾过，给你几个亲测有效的方案！其实cordova-plugin-statusbar本身就支持修改状态栏文字颜色，只是iOS和Android的适配逻辑不一样，咱们分开来聊：

一、页面级单独设置（按需调整单页） #

如果只是想给某个特定页面改文字颜色，可以在页面的生命周期钩子（比如ionViewDidEnter）里调用插件API：

iOS平台 #

iOS直接用插件提供的styleLightContent()或styleDarkContent()就能切换文字明暗，iOS13+还支持更灵活的setStyle()方法：

import { Platform } from 'ionic-angular';

constructor(private platform: Platform) {}

ionViewDidEnter() {
  // 等平台就绪再调用插件
  this.platform.ready().then(() => {
    if (window.StatusBar) {
      // 把文字改成浅色（适合深色状态栏背景）
      window.StatusBar.styleLightContent();
      // 要是想改回深色文字，就用下面这句
      // window.StatusBar.styleDarkContent(); // iOS13+支持，低版本用styleDefault()
    }
  });
}

Android平台 #

Android 6.0以上才支持修改状态栏文字颜色，得先设置状态栏背景色，再调用文字样式方法，也可以配合config.xml配置：

this.platform.ready().then(() => {
  if (window.StatusBar) {
    // 先给状态栏整个背景色
    window.StatusBar.backgroundColorByHexString('#2196F3');
    // 把文字改成浅色（对应深色背景）
    window.StatusBar.styleLightContent();
    // 改回深色文字用styleDefault()
    // window.StatusBar.styleDefault();
  }
});

二、全局统一设置（一次搞定所有页面） #

要是想整个APP的状态栏文字颜色都统一，直接在app.component.ts里全局配置最方便：

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  constructor(private platform: Platform) {
    this.platform.ready().then(() => {
      if (window.StatusBar) {
        // 全局设置浅色文字，搭配你想要的背景色
        window.StatusBar.styleLightContent();
        window.StatusBar.backgroundColorByHexString('#1976D2');
      }
    });
  }
}

也可以直接在config.xml里加全局偏好，省得写代码：

<!-- iOS全局设置浅色文字 -->
<preference name="StatusBarStyle" value="lightcontent" />
<!-- Android全局配置状态栏背景和文字颜色 -->
<preference name="StatusBarBackgroundColor" value="#1976D2" />
<preference name="StatusBarStyle" value="lightcontent" />

三、踩坑提醒 #

• 确保你的cordova-plugin-statusbar是最新版本，旧版本对Android 6.0+的支持拉胯，更新命令：cordova plugin update cordova-plugin-statusbar
• Android上如果调用了styleLightContent()却没生效，去res/values/styles.xml里检查主题配置，得加上windowLightStatusBar属性：

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:windowLightStatusBar">true</item> <!-- 开启浅色文字支持 -->
  </style>
  

• iOS低版本（低于13）不支持styleDarkContent()，用styleDefault()就能恢复深色文字。

内容的提问来源于stack exchange，提问作者Simone NoLogo