open-index/open-npm huggingface dataset:
npm package: @magongshou-ohos/cordova-plugin-navigationbar-color
Description: Cordova Navigationbar Plugin
Author: Huawei Device, Inc. Ltd. and
Latest version: 0.1.0

# cordova-plugin-navigationbar-color

一款专为 Cordova 混合移动应用打造的导航栏控制插件，支持跨平台自定义设备导航栏的显示和隐藏等核心属性，助力开发者实现与应用风格统一的导航栏视觉效果，提升用户体验。



## 功能特性

- **灵活显示控制**：支持导航栏的显示/隐藏切换，可设置临时隐藏或永久隐藏（需适配系统规则）

- **无依赖轻量设计**：不依赖第三方UI库，插件体积小巧，对应用性能影响极小



## 安装方法

### 1. 基础安装（推荐）

适用于大多数场景，直接从 npm 仓库安装稳定版：

```bash
# 安装hcordova
npm install -g hcordova

# 安装最新稳定版插件
hcordova plugin add cordova-plugin-navigationbar-color --platform ohos

# 安装指定版本（示例：1.0.0 版本）
hcordova plugin add cordova-plugin-navigationbar-color@1.0.0 --platform ohos
```

### 2. 从 GitCode 安装开发版

适用于需要体验最新功能的开发者，从 GitHub 仓库直接安装：

```bash

# 安装开发版插件
hcordova plugin add https://gitcode.com/OpenHarmony-Cordova/cordova-plugin-navigationbar-color.git --platform ohos

```

### 4. 安装后验证

安装完成后，可通过以下命令验证插件是否安装成功：

```bash

# 查看已安装的插件列表
hcordova plugin list

# 若列表中显示 cordova-plugin-navigationbar-color 则安装成功

```

## 卸载方法

进入项目根目录，执行以下命令卸载插件，卸载后建议重新构建项目以清理残留的原生配置文件：

```bash

# 全平台卸载导航栏控制插件
hcordova plugin remove cordova-plugin-navigationbar-color

# 指定OHOS卸载
hcordova plugin remove cordova-plugin-navigationbar-color --platform ohos

```

## API 参考

### 1. 显示导航栏（show）

显示隐藏的导航栏，若导航栏已显示则无效果。

```javascript

NavigationBar.show();
```

### 2. 隐藏导航栏（hide）

隐藏当前显示的导航栏，沉浸式隐藏（全屏效果）。

```javascript

NavigationBar.hide();
```

### 3. 设置导航栏颜色

NavigationBar.backgroundColorByName(colorname, lightNavigationBar) 

NavigationBar.backgroundColorByHexString(hexString, lightNavigationBar) 

参数说明：
- **colorname** 颜色名称
- **hexString** 颜色字符串
- **lightNavigationBar** 是否高亮显示

支持的颜色名称：
|名称|颜色|
|---|---|
|"black":| "#000000",|
|"darkGray":| "#A9A9A9",|
|"lightGray": |"#D3D3D3",|
|"white": |"#FFFFFF",|
|"gray": |"#808080",|
|"red": |"#FF0000",|
|"green": |"#00FF00",|
|"blue": |"#0000FF",|
|"cyan": |"#00FFFF",|
|"yellow": |"#FFFF00",|
|"magenta": |"#FF00FF",|
|"orange": |"#FFA500",|
|"purple":| "#800080",|
|"brown": |"#A52A2A"|

```javascript
//通过名称设置
NavigationBar.backgroundColorByName("blue", false);

NavigationBar.backgroundColorByHexString("#000000"， false);
```

## 许可证

本插件基于 **Apache License 2.0** 开源，详见 [LICENSE](LICENSE) 文件。

## 联系方式

OHOS Cordova [https://gitcode.com/OpenHarmony-Cordova/cordova-plugin-navigationbar-color](https://gitcode.com/OpenHarmony-Cordova/cordova-plugin-navigationbar-color)

Android/iOS：[https://npmjs.com/cordova-plugin-navigationbar-color/issues](https://npmjs.com/cordova-plugin-navigationbar-color/issues)