Page/area: Capgo marketing website. Role: Website copy sentence. Seen in: component Hero.astro. Message key `hero_subtitle_v2` (Hero Subtitle V2).

复制安装提示并获取该插件的完整 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.

如果您更喜欢手动设置，请按照以下命令安装插件，并遵循以下平台特定的说明:

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

导入

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

API概述

`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);

类型参考

`NavigationBarColor`

预定义导航栏颜色。

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

真实来源

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

继续从 Getting Started

如果您正在使用 开始使用 来规划原生媒体和界面行为，请将其与使用 @capgo/capacitor-navigation-bar 用于在使用 @capgo/capacitor-navigation-bar 中的原生能力使用 @capgo/capacitor-live-activities 用于在使用 @capgo/capacitor-live-activities 中的原生能力 @capgo/capacitor-实时活动为 @capgo/capacitor-live-activities 的实现细节使用 @capgo/capacitor-video-player 为使用 @capgo/capacitor-video-player 的原生能力 @capgo/capacitor-视频播放器为 @capgo/capacitor-video-player 的实现细节