使用@capgo/capacitor-navigation-bar
Capacitor导航栏插件，用于自定义Android导航栏
安装
bun add @capgo/capacitor-navigation-bar
bunx cap sync
本插件暴露的内容
setNavigationBarColor- 设置导航栏颜色和按钮主题getNavigationBarColor- 获取当前导航栏颜色和按钮主题
示例用法
setNavigationBarColor
设置导航栏颜色和按钮主题
import { NavigationBar, NavigationBarColor } from '@capgo/capacitor-navigation-bar';
// Set to white with dark buttons
await NavigationBar.setNavigationBarColor({
color: NavigationBarColor.WHITE,
darkButtons: true
});
// Set to custom color
await NavigationBar.setNavigationBarColor({
color: '#FF5733',
darkButtons: false
});
// Set a custom divider color on Android 9+
await NavigationBar.setNavigationBarColor({
color: NavigationBarColor.WHITE,
darkButtons: true,
dividerColor: '#D9D9D9'
});
getNavigationBarColor
获取当前导航栏颜色和按钮主题
import { NavigationBar } from '@capgo/capacitor-navigation-bar';
const { color, darkButtons } = await NavigationBar.getNavigationBarColor();
console.log('Current color:', color);
console.log('Using dark buttons:', darkButtons);
完整参考
- GitHub: https://github.com/Cap-go/capacitor-navigation-bar/
- 文档：/docs/plugins/navigation-bar/
继续使用@capgo/capacitor-navigation-bar
如果您正在使用 使用@capgo/capacitor-导航条 规划原生媒体和界面行为，连接它与 @capgo/capacitor-导航条 了解@capgo/capacitor-导航条的实现细节 开始使用 了解开始使用的实现细节 使用@capgo/capacitor-实时活动 了解使用@capgo/capacitor-实时活动的原生能力 @capgo/capacitor-实时活动 了解@capgo/capacitor-实时活动的实现细节，并 使用@capgo/capacitor-视频播放器 了解使用@capgo/capacitor-视频播放器的原生能力