无法使用 Cordova 更改状态栏

Posted

技术标签:

【中文标题】无法使用 Cordova 更改状态栏【英文标题】:Can't Change Status Bar with Cordova 【发布时间】:2015-10-18 10:23:28 【问题描述】:

我正在使用 Cordova 构建一个混合应用程序,并且我正在尝试动态更改状态栏的颜色。我动态地这样做的原因是为了让不同的平台可以使用稍微不同的颜色来让它感觉更原生。

我的项目中有installedcordova-plugin-statusbar,现在我的应用程序的JS 代码中有StatusBar 对象。但是,当我尝试使用StatusBar.backgroundColorByHexString 方法时,它不起作用。

以下是处理此问题的代码:

function onDeviceReady() 
    document.addEventListener( 'pause', onPause.bind( this ), false );
    document.addEventListener( 'resume', onResume.bind( this ), false );


    if (StatusBar) 
        window.alert("The plugin loaded correctly.");
    
    if (cordova.platformId == 'ios') 
        StatusBar.overlaysWebView(false);
        StatusBar.backgroundColorByHexString("#4CAF50");
        window.alert("The plugin should have run.");
     else 
        StatusBar.backgroundColorByHexString("#388E3C");
        window.alert("The plugin should have run.");
    
;

代码运行时不会抛出任何错误,但它根本不会更改状态栏(我正在 android 设备上进行测试,因此我假设在其他平台上也会发生相同的行为)。我该如何解决这个问题?

【问题讨论】:

【参考方案1】:

我终于想通了,所以如果其他人有这个问题,这里是解决方案:

    启动 Cordova 工具扩展的卸载程序 “修复”扩展并重新启动 Visual Studio 进入设置并清除 Cordova 缓存 将 Cordova CLI 版本更改为 5.1.1 为了完成对 5.1.1 的更新,请安装白名单插件,将域策略信息添加到您的 config.xml 文件,并在您的应用中的每个页面添加 CSP 策略标签,例如 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

【讨论】:

以上是关于无法使用 Cordova 更改状态栏的主要内容,如果未能解决你的问题,请参考以下文章

在 Cordova 中更改 Android 状态栏颜色

无法使用 IONIC 5 在 Android 中更改状态栏颜色

Cordova Android状态栏设置为透明

状态栏和标题之间的 Cordova Android 空白

jQuery - 检测 iPhone 通话状态栏

iPad Pro Cordova 应用程序缩放