如何修改Cordova打包的Android应用状态栏背景色及图标样式

解决方案 #

你需要借助Cordova官方提供的状态栏插件完成配置，具体操作步骤如下：

1. 安装状态栏插件
   在项目根目录执行安装命令：

cordova plugin add cordova-plugin-statusbar

2. 静态配置（修改项目根目录的config.xml文件）
   在config.xml的Android平台配置段内添加以下参数：

<!-- 设置状态栏背景为纯白色 -->
<preference name="StatusBarBackgroundColor" value="#FFFFFF" />
<!-- 设置状态栏图标为黑色（仅Android 6.0+生效） -->
<preference name="StatusBarStyle" value="default" />
<!-- 禁止状态栏覆盖WebView内容，避免滚动时页面内容外露到状态栏区域 -->
<preference name="StatusBarOverlaysWebView" value="false" />
<!-- 适配Android浅色状态栏规则 -->
<preference name="AndroidStatusBarAppearance" value="light" />

3. 动态配置（可选，若需要在运行时修改样式）
   在React应用的入口代码中监听Cordova的deviceready事件，触发后执行配置：

document.addEventListener('deviceready', () => {
  // 设置状态栏背景色
  StatusBar.backgroundColorByHexString('#FFFFFF');
  // 设置状态栏图标为黑色
  StatusBar.styleDefault();
}, false);

兼容说明 #

• 浅色状态栏（黑色图标）仅支持Android 6.0（API 23）及以上系统，低于该版本的系统无法显示黑色状态栏图标，可针对性为低版本设置深灰色状态栏背景，避免白色背景下白色图标看不清的问题
• 若你需要实现状态栏和顶部导航栏完全融合的沉浸式效果，可以将StatusBarOverlaysWebView设为true，同时给你的顶部导航栏组件添加等于状态栏高度的上内边距，可通过StatusBar.height属性获取当前设备的状态栏高度动态设置

内容的提问来源于stack exchange，提问作者Paraic Mcdonagh