在ionic 5中更改底部导航栏颜色
在ionic 5中更改底部导航栏颜色
提问于 2021-04-26 15:54:42
我无法更改我的应用程序的底部导航栏颜色。当我将我的应用程序主题更改为深色时，底部导航栏的主题(其中有概述、主页和后退按钮)仍然很亮，即背景仍然是白色的，带有黑色图标。如何在ionic中设置底部导航栏的样式？下面是我的changeTheme()方法代码，我在其中更改了我的应用程序的主题：
changeTheme() {
this.darkTheme = !this.darkTheme;
if (this.darkTheme) {
// Change app theme
document.body.setAttribute('theme-color', 'dark');
// Change StatusBar theme
StatusBar.setBackgroundColor({ color: 'black' });
StatusBar.setStyle({style: StatusBarStyle.Dark});
// How to change Bottom Navigation Bar theme?
} else {
// Change app theme
document.body.setAttribute('theme-color', 'light');
// Change StatusBar theme
StatusBar.setBackgroundColor({ color: 'white' });
StatusBar.setStyle({style: StatusBarStyle.Light});
// How to change Bottom Navigation Bar theme?
}
}我知道这个问题已经被问到here了。但是这个解决方案在ionic的最新版本中是行不通的。
回答 1
Stack Overflow用户
发布于 2021-04-27 18:38:41
@SnowBase在here上给出的原始答案
步骤：
在platform.ready()
- Implementation:
之后，
- 使用
npm i cordova-plugin-navigationbar-color - Remember安装cordova- plugin -navigationbar-color插件以实现此插件
changeTheme() {
// StatusBar.setOverlaysWebView({overlay: true});
this.darkTheme = !this.darkTheme;
if (this.darkTheme) {
// Change app theme
document.body.setAttribute('theme-color', 'dark');
// Change StatusBar theme
StatusBar.setBackgroundColor({ color: 'black' });
StatusBar.setStyle({ style: StatusBarStyle.Dark });
// Change NavigationBar theme
NavigationBar.backgroundColorByName('black', false);
} else {
// Change app theme
document.body.setAttribute('theme-color', 'light');
// Change StatusBar theme
StatusBar.setBackgroundColor({ color: 'white' });
StatusBar.setStyle({ style: StatusBarStyle.Light });
// Change NavigationBar theme
NavigationBar.backgroundColorByName('white', true);
}
}用于解决错误的
-
Cannot find name 'NavigationBar'将NavigationBar声明为类外部的全局属性，如下所示：
declare const NavigationBar: any;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67262794
复制相关文章
相似问题
腾讯云开发者
