快速入门

复制包含安装步骤和该插件完整 Markdown 指南的配置 prompt。

        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 skills 添加到你的 AI 工具中：

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

然后使用以下 prompt：

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';

快速入门

使导航栏与深色页眉和浅色图标相匹配。

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

await NavigationBar.setNavigationBarColor({
  color: '#0f172a',
  darkButtons: false,
});

示例：沉浸式阅读模式

await NavigationBar.hide();
// later, when leaving the reader
await NavigationBar.show();

示例：读取当前主题

const { color, darkButtons } = await NavigationBar.getNavigationBarColor();

常见坑点

仅限 Android：此插件中没有与 iOS 导航栏等效的功能。
边到边显示：请配合状态栏和 WebView 安全区域 CSS 使用，确保导航栏再次显示时内容不会被遮挡。

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 发生变化时，请重新运行 sync。

从入门指南继续

如果你正在使用 快速入门 来规划原生媒体和界面行为，并将其与使用 @capgo/capacitor-navigation-bar 在使用 @capgo/capacitor-navigation-bar 时，获取原生能力的方法：使用 @capgo/capacitor-live-activities 用于使用 @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-video-player. 中的实现细节