Ionic/Cordova 更改 Android 导航栏颜色答案

【问题标题】：Ionic/Cordova Change Android Navigation Bar colorIonic/Cordova 更改 Android 导航栏颜色
【发布时间】：2018-11-12 07:00:15
【问题描述】：

我正在尝试更改 Android 中导航栏的颜色（在底部，带有返回和主页键） - 在没有硬件主页和返回键的手机上。在我使用 Cordova 的 Ionic 应用程序中。

有没有办法做到这一点？

例子：

【问题讨论】：

标签： android cordova ionic-framework cordova-plugins

【解决方案1】：

发现这个很棒的cordova插件做得很好：
https://www.npmjs.com/package/ionic-plugin-navigation-bar-color

【讨论】：

离子 4 好像坏了，还有其他选择吗？
我可以确认这个插件在 Ionic 4 中不再工作。
这个插件看起来很棒，但不适用于 Ionic 5，有人知道与 Ionic 5 类似的插件吗？
有人找到最新离子版本的解决方案吗？

【解决方案2】：

您可以在所需页面中使用以下样式，将其添加到相应的 scss 文件中，并按照您的要求使用 android

.toolbar-background-md{
    background-color: 'your color code here';
  }

如果您想在整个应用程序中保持相同，请将其放入 variable.scss

对于 ios 使用相同的方法，但不是 md 使用 ios 标签，如下所示

.toolbar-background-ios{
     background-color: 'your color code here';
 }

【讨论】：

对不起，我说的不是工具栏。我的意思是实际的手机导航栏，它显示在底部没有硬件键的设备上
@amitairos 除非有本地解决方案，否则这是不可能的，在这种情况下，您需要查找或编写 cordova 插件
@SurajRao 我知道这一点。你知道这样的cordova插件吗？
@amitairos 我不知道有一个。此外，这似乎非常特定于设备，
对此有何解决方案？

【解决方案3】：

使用@ionic/angular 5.6.0 测试工作的cordova 插件： https://github.com/fagundes/cordova-plugin-navigationbar

Ionic:

   Ionic CLI                     : 6.11.10 (C:\Users\admin\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.0
   @angular-devkit/build-angular : 0.1101.4
   @angular-devkit/schematics    : 11.1.4
   @angular/cli                  : 11.1.4
   @ionic/angular-toolkit        : 3.1.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 24 other plugins)

第一种方法（声明一个全局变量）

declare const NavigationBar: any;

NavigationBar.backgroundColorByHexString("#FFFFFF", true);

或者使用2种方法：

window.NavigationBar.backgroundColorByHexString("#FFFFFF", true);

导航栏白底黑色按钮（导航栏内按钮）：

【讨论】：

离子 6？你在说什么？当前版本是 5.5.4
确定已编辑。无论如何我不确定 CLI 版本在这个主题中是否重要，框架版本应该
@afe 也许是科尔多瓦版本？因为它是一个cordova插件。忘记项目在哪了，我会再更新的，谢谢提醒。
当然，好点子！也应注意cordova-android 版本。谢谢！

【解决方案4】：

我在我的 sass 文件 theme/variable.scss 文件中做了类似的事情

$toolbar-background: #009241;

来自this

【讨论】：

查看我对@SaEChowdary 的回复

【解决方案5】：

@Amitairos android 导航栏也叫状态栏。 IONIC native 有一个插件。在这个链接上查看https://ionicframework.com/docs/native/status-bar/。

例如：-this.statusBar.styleBlackTranslucent(); 这会将您的状态栏颜色更改为黑色。您也可以使用任何颜色代码，请查看上面的链接。这肯定会对你有所帮助。

【讨论】：

我对此进行了测试，它只为屏幕顶部的状态栏着色。它不会为屏幕底部的导航栏着色。你确定我们指的是同一件事吗？我在我的问题中添加了一张图片
它只改变状态栏，而不是Android中的导航栏