# @capgo/capacitor-navigation-bar 中文文档

规范地址：https://npmcn.com/package/%40capgo/capacitor-navigation-bar/

版本：8\.2\.19
npm 元数据更新时间：2026-11-02T13:10:16.227Z
中文译文更新时间：2026-11-09T02:32:06.043Z
软件包许可：MPL-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40capgo/capacitor-navigation-bar
原文对照：https://npmcn.com/package/%40capgo/capacitor-navigation-bar/?lang=original
项目主页：https://capgo.app/docs/plugins/navigation-bar/
源码仓库：https://github.com/Cap-go/capacitor-navigation-bar

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：71.3 kB，26 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@capacitor/core \>=8\.0\.0
- 首次发布：2023-03-10T01:57:38.853Z
- 最新版本发布：2026-11-02T13:10:15.936Z
- 近 30 天下载量：102115（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：195（近 12 个月 56 个）

## 中文简介

电容插件 为和机器人棒棒棒糖及更高端设置导航栏颜色

## 安装

```sh
npm install @capgo/capacitor-navigation-bar
```

也可以使用：`pnpm add @capgo/capacitor-navigation-bar`、`yarn add @capgo/capacitor-navigation-bar`、`bun add @capgo/capacitor-navigation-bar`

## README

# 电容器导航栏

从您的 Capacitor app 控制Android 导航条: 设置其颜色和按钮样式,使其透明,或者隐藏用于浸泡屏幕.

[![Capgo - Build Capacitor apps with AI, ship updates instantly](https://capgo.app/readme-banner.svg?repo=Cap-go/capacitor-navigation-bar)](https://capgo.app/?ref=plugin_navigation_bar)

**队长**:在几分钟内将修正推给您的 Capacitor 用户,在没有Mac的情况下构建已签名的iOS和Android apps,并在一击中回滚.

## [\*免费开始\*](https://capgo.app/register/?ref=plugin_navigation_bar)

14天无限自由审判. 不需要信用卡

> 🤖 **建筑与AI编码代理?** 安装 [Capgo 技能](https://capgo.app/skills/?ref=plugin_navigation_bar) 所以克劳德代码,代码,光标,副驾驶,或双子座CLI知道如何安装和使用 `@capgo/capacitor-navigation-bar` 在您的电容应用程序中: `npx skills add Cap-go/capgo-skills`。然后问你的经纪人: _加入@capgo/capor-navigation-bar到我的Capacitor应用上,并把它接上_ [代理设置指南](https://capgo.app/agents/?ref=plugin_navigation_bar) • 妇女 [主机磁共振](https://capgo.app/docs/ai/mcp/?ref=plugin_navigation_bar)

![@capgo/capacitor-navigation-bar for Capacitor apps](https://raw.githubusercontent.com/Cap-go/capacitor-navigation-bar/main/assets/github-social-preview.png)

## 主要特点

-   **颜色**数字 : `setNavigationBarColor()` 设置边框颜色,包括 `transparent`,以及轻或暗的按钮.
-   **读取状态**数字 : `getNavigationBarColor()` 返回当前颜色和按钮主题.
-   **隐藏并显示**数字 : `hide()` 财务报告和审定财务报表 `show()` 全屏内容.
-   **配置默认值**设置 `color`, (中文(简体) ), `dividerColor` 财务报告和审定财务报表 `style` 内 `capacitor.config` 在发射时适用.
-   **平台**:Android (英语). 仅限Android. iOS拒绝这些电话,网络只登录它们.

## 文档

这里有最完整的医生: [https://capgo.app/docs/plugins/navigation-bar/ 页面存档备份,存于互联网档案馆](https://capgo.app/docs/plugins/navigation-bar/)

## 兼容性

| 插件版本 | 电容兼容性 | 维护 |
| --- | --- | --- |
| 联合国 | 联合国 | ✅ |
| 页:1 | 页:1 | 应要求 |
| 页:1 | 页:1 | ❌ |
| 页:1 | 页:1 | ❌ |

> **说明:** 此插件的主要版本沿用了Capacitor的主要版本. 使用匹配您的 Capacitor 安装的版本( 如 Capacitor 8 的插件 v8) 。 只有最新的主要版本得到积极维护.

## 安装

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

```bash
npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins
```

然后使用下列提示:

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

如果您更喜欢手动设置,请通过运行以下命令来安装插件,并遵循下面的平台特定指令:

```bash
npm install @capgo/capacitor-navigation-bar
npx cap sync
```

## 示例应用程序

-   `example-app`: 练习所有插件选项(颜色预设,自定义六进制,深色按钮,状态读取)的交互式演示.

## 配置

您可以在本地插件加载时应用导航栏默认:

```typescript
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    NavigationBar: {
      color: '#ffffff',
      dividerColor: '#d9d9d9',
      style: 'LIGHT',
    },
  },
};

export default config;
```

`style` 接受 `LIGHT`, (中文(简体) ), `DARK`,或 `DEFAULT`启用 `LIGHT` 暗的按钮, `DARK` 用于轻按钮,以及 `DEFAULT` 以跟踪当前设备的外观.

## API 密码

-   [`hide()`](https://npmcn.com/package/%40capgo/capacitor-navigation-bar/#readme-hide)
-   [`show()`](https://npmcn.com/package/%40capgo/capacitor-navigation-bar/#readme-show)
-   [`setNavigationBarColor(...)`](https://npmcn.com/package/%40capgo/capacitor-navigation-bar/#readme-setnavigationbarcolor)
-   [`getNavigationBarColor()`](https://npmcn.com/package/%40capgo/capacitor-navigation-bar/#readme-getnavigationbarcolor)
-   [`getPluginVersion()`](https://npmcn.com/package/%40capgo/capacitor-navigation-bar/#readme-getpluginversion)
-   [数字](https://npmcn.com/package/%40capgo/capacitor-navigation-bar/#readme-enums)

用于自定义Android导航栏的 Capacitor 导航栏插件 .

### 隐藏( c)

```typescript
hide() => Promise<void>
```

隐藏导航栏 .

只能从Android上找到.

**自:** 8.2.0 (中文(简体) )

* * *

### 显示 ()

```typescript
show() => Promise<void>
```

显示导航栏 .

只能从Android上找到.

**自:** 8.2.0 (中文(简体) )

* * *

### 设置导航Bar Color (...)

```typescript
setNavigationBarColor(options: { color: NavigationBarColor | string; darkButtons?: boolean; dividerColor?: NavigationBarColor | string; }) => Promise<void>
```

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

| 参数 | 类型 | 说明 |
| --- | --- | --- |
| **`options`** | `{ color: string; darkButtons?: boolean; dividerColor?: string; }` | \- 导航栏外观的配置 |

**自:** 1.0.0 (单位:千美元)

* * *

### 获得导航Bar Color ()

```typescript
getNavigationBarColor() => Promise<{ color: string; darkButtons: boolean; }>
```

获取当前导航栏颜色和按钮主题 .

**回返情况:** `Promise<{ color: string; darkButtons: boolean; }>`

**自:** 1.0.0 (单位:千美元)

* * *

### 获取 PluginVersion ()

```typescript
getPluginVersion() => Promise<{ version: string; }>
```

获取本地 Capacitor 插件版本 .

**回返情况:** `Promise<{ version: string; }>`

**自:** 1.0.0 (单位:千美元)

* * *

### 数字

#### 导航条颜色

| 成员 | 数值 | 说明 |
| --- | --- | --- |
| **`WHITE`** | `'#FFFFFF'` | 白色 |
| **`BLACK`** | `'#000000'` | 黑色颜色 |
| **`TRANSPARENT`** | `'transparent'` | 透明颜色 |

## 常见问题

### @capgo/capacitor-navigation-bar 是什么？

电容插件 为和机器人棒棒棒糖及更高端设置导航栏颜色

### 如何安装 @capgo/capacitor-navigation-bar？

在项目目录运行 npm install @capgo/capacitor-navigation-bar，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@capacitor/core（\>=8\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @capgo/capacitor-navigation-bar 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @capgo/capacitor-navigation-bar 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @capgo/capacitor-navigation-bar 可以商用吗？

@capgo/capacitor-navigation-bar 使用 MPL-2\.0 许可。弱 Copyleft：可以商用，也可以和闭源代码一起使用；但如果分发时修改了 MPL 授权的文件，这些文件的修改需以 MPL 开源。以上为概括，不构成法律意见，请以许可原文为准。

### @capgo/capacitor-navigation-bar 的下载量有多少？

根据 npm 官方下载统计，@capgo/capacitor-navigation-bar 在 2026/10/09 – 2026/11/07 这 30 天内被下载 102,115 次，日均约 3,404 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @capgo/capacitor-navigation-bar 还在维护吗？

最新版本 8\.2\.19 发布于 2026/11/02（6 天前）；至今共发布 195 个版本，其中过去 12 个月发布了 56 个；首次发布于 2023/03/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。