Getting Started

复制一个包含安装步骤和本插件的完整Markdown指南的设置提示。

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-navigation-bar`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/navigation-bar/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

安装

您可以使用我们的 AI 助手设置来安装插件。使用以下命令将 Capgo 技能添加到您的 AI 工具中：

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

然后使用以下提示：

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-navigation-bar` plugin in my project.

如果您prefer Manual Setup，安装插件并运行以下命令并遵循以下平台特定的说明：

bun add @capgo/capacitor-navigation-bar
bunx cap sync

导入

import { NavigationBar } from '@capgo/capacitor-navigation-bar';

API概述

`setNavigationBarColor`

设置导航栏颜色和按钮主题

import { NavigationBar } 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);

类型参考

`NavigationBarColor`

预定义导航栏颜色

export enum NavigationBarColor {
  /** White color */
  WHITE = '#FFFFFF',
  /** Black color */
  BLACK = '#000000',
  /** Transparent color */
  TRANSPARENT = 'transparent',
}

真实来源

本页面由插件生成 src/definitions.ts当公共API上游发生变化时，请重新同步

继续从开始

If you are using __CAPGO_KEEP_0__/__CAPGO_KEEP_1__ to plan native media and interface behavior, connect it with __CAPGO_KEEP_0__/__CAPGO_KEEP_1__ Getting Started 使用 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-navigation-bar 来实现原生导航栏使用 capgo/capacitor-navigation-bar 来实现原生导航栏的能力使用 capgo/capacitor-live-activities 来实现原生直播活动使用 capgo/capacitor-live-activities 来实现原生直播活动的能力 capgo/capacitor-live-activities 使用 capgo/capacitor-video-player 来实现原生视频播放使用 capgo/capacitor-video-player 来实现原生视频播放的能力 capgo/capacitor-video-player capgo/capacitor capgo/capacitor 关于 @capgo/capacitor-视频播放器的实现细节。