本项目基于 react-native-navigation-bar-color开发。如果在使用过程中有任何问题，欢迎在AtomGit提交Issue，会及时跟进。

项目介绍

@hxa-rn/react-native-navigation-bar-color 是 react-native-navigation-bar-color 的鸿蒙（OpenHarmony）适配版本，当前规范版本号为 2.0.2-beta.1。

本库提供 changeNavigationBarColor、hideNavigationBar、showNavigationBar 三个 TurboModule 方法。

| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | | ------------ | ---------- | ------------ | -------- | | 2.0.2-beta.1 | 2.0.2 | 0.72+ | 是 |

集成指南

npm install @hxa-rn/react-native-navigation-bar-color

本模块支持 Autolink。import 时使用原库名 'react-native-navigation-bar-color'。

HAR 路径：harmony/navigation_bar_color.har。

使用说明

import {
  changeNavigationBarColor,
  hideNavigationBar,
  showNavigationBar,
} from 'react-native-navigation-bar-color';

await changeNavigationBarColor('#80b3ff', false, true);
await hideNavigationBar();
await showNavigationBar();

透明/沉浸式模式下，需让 SafeAreaView 显式设置 paddingBottom: 0（及全屏时 paddingTop: 0）使内容延伸到导航区。退出该布局时宿主应调用 restoreSolidNavigationBarColor()（或再次传入上次实色），否则透明窗口背景会在底部避让区透成深色。

接口文档

| API | 描述 | 参数 | 返回值 | HarmonyOS 支持 | |-----|------|------|--------|----------------| | changeNavigationBarColor | 修改底部导航栏背景色 | color: string; light?; animated? | Promise<{success}> | ⚠️ 部分支持 | | hideNavigationBar | 隐藏系统底部导航栏 | 无 | Promise<{success}> | ✅ 完全支持 | | showNavigationBar | 恢复导航栏显示 | 无 | Promise<{success}> | ✅ 完全支持 |

鸿蒙通过 setWindowBackgroundColor 近似实现导航栏颜色，并用 statusBarColor 钉住状态栏避免顶部跟着变色；light、animated 被忽略。transparent/translucent 均实现为沉浸式 + 透明窗口背景。

快速验证（运行 Example）

前置条件

| 依赖 | 版本要求 | |------|----------| | Node.js | >= 18 | | DevEco Studio | 5.0+ | | HarmonyOS SDK | API 12+ |

运行步骤

1. 克隆仓库

git clone https://gitcode.com/hxa-rn/react-native-navigation-bar-color.git
cd react-native-navigation-bar-color
git checkout br_rnoh0.72

2. 安装仓库开发依赖

npm install --legacy-peer-deps

Example 已改为从 npm 公仓安装 @hxa-rn/[email protected]，不再使用本地 file:../xxx.tgz，运行 Example 不必再执行 npm pack。

3. 进入 example 目录，安装依赖

cd example          # 或 example_auto
npm install --legacy-peer-deps

4. 生成 JS Bundle

npm run dev

产物：harmony/entry/src/main/resources/rawfile/bundle.harmony.js

5. 用 DevEco Studio 打开鸿蒙工程

• 打开 DevEco Studio
• 选择 example/harmony（或 example_auto/harmony）目录
• 等待 Sync 完成

6. 编译并运行 HAP

在 DevEco Studio 中点击运行按钮，将 HAP 安装到设备/模拟器。

注意：Example 中已预置插件依赖和 Package 注册，无需手动配置 Link。

约束与限制

兼容性

• 鸿蒙 SDK：API 12+
• 上游 RN SDK：0.72+
• React Native / RNOH：0.72+
• DevEco Studio：5.0+

权限

• 无额外系统权限

使用限制

• 改色与隐藏仅作用于底部导航区；状态栏由实现侧尽量保持不变。light / animated 在鸿蒙无效。

开源license

本项目基于 MIT 协议，详见 LICENSE 文件。

问题反馈渠道

使用问题请在 AtomGit 提交 Issue。也可在 GitCode 仓库反馈：

https://gitcode.com/hxa-rn/react-native-navigation-bar-color

https://gitcode.com/hxa-rn/react-native-navigation-bar-color/issues