{"_id":"@bingtang-rn/react-native-navbar","_rev":"2-accf2d836afede140a66fba05cd28ec9","name":"@bingtang-rn/react-native-navbar","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@bingtang-rn/react-native-navbar","version":"1.0.0","keywords":["react-native","harmony","harmonyos","react-native-navbar"],"license":"MIT","_id":"@bingtang-rn/react-native-navbar@1.0.0","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_navbar","dist":{"shasum":"03b1b5346513f54ccb159a049ca8a38d4c33d690","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-navbar/-/react-native-navbar-1.0.0.tgz","fileCount":9,"integrity":"sha512-OWRPwF2a1hgpNd2Q6Q05U/xjhbg753zsPJCIx8NdBHjx96+LAO5cjQ004BJffFRVQ93S+FvJ96lPlEzR7B5b7g==","signatures":[{"sig":"MEYCIQD/S0Lb3q3vsaOZ6uFLPxF71Z3VQBIHDTRdgFuRqGsqmQIhANQovetoySl7L5bcshVFuyzG1v29xGK7DDQubKayErfd","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17457},"main":"./src/index.js","module":"./src/index.js","engines":{"node":">=18"},"gitHead":"7251a13cdd40a85366c1a6a287e67fcaa148c38a","harmony":{"alias":"react-native-navbar"},"private":false,"scripts":{"prepare":"echo skip"},"_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_navbar","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_navbar组件。","directories":{},"_nodeVersion":"24.15.0","dependencies":{"prop-types":"^15.5.10"},"react-native":"./src/index.js","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.3","metro":"^0.81.0","react":"18.2.0","typescript":"5.0.4","@types/react":"18.2.79","react-native":"0.72.5","@react-native/typescript-config":"0.79.5","@react-native-oh/react-native-harmony-cli":"^0.77.50"},"peerDependencies":{"react-native":">=0.72"},"_npmOperationalInternal":{"tmp":"tmp/react-native-navbar_1.0.0_1785999779473_0.41193625359971686","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"_id":"@bingtang-rn/react-native-navbar@1.0.1","dist":{"shasum":"47a1a14a11a4cb6000e9bd3ddd82c69a10d36035","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-navbar/-/react-native-navbar-1.0.1.tgz","fileCount":9,"integrity":"sha512-1botAf/TCbdJiRq/N8VqV+6l/XEv5TtEoFG1MwFvJI6FJZzjv1qJTtQ0H/K716YKi+8mKrEFmvkKC8CR8wkPYA==","signatures":[{"sig":"MEYCIQD6l/wn5HXnJJpFbV6OAPwdpnMIYl43q03m6yCZmJUPJwIhAIc4OLSfc4wTBkmF0nF+C3j6AIzuOg1fzwEHePelsf3Z","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDYBkg/wO/mrhzz6WYlbG0Icm48s7to+l/ZBQQDr8+V4gIgAMhFFfHgHMw0ca5BC0tTaHs4tGEVoTZ3z3sEuKgiIAk="}],"unpackedSize":17512},"main":"./src/index.js","name":"@bingtang-rn/react-native-navbar","_from":"file:bingtang-rn-react-native-navbar-1.0.1.tgz","module":"./src/index.js","engines":{"node":">=18"},"harmony":{"alias":"react-native-navbar"},"license":"MIT","private":false,"scripts":{"prepare":"echo skip"},"version":"1.0.1","_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_navbar","keywords":["react-native","harmony","harmonyos","react-native-navbar"],"_resolved":"D:\\code\\rn\\npm\\batch\\react_native_navbar\\bingtang-rn-react-native-navbar-1.0.1.tgz","_integrity":"sha512-1botAf/TCbdJiRq/N8VqV+6l/XEv5TtEoFG1MwFvJI6FJZzjv1qJTtQ0H/K716YKi+8mKrEFmvkKC8CR8wkPYA==","repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_navbar","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_navbar组件。","directories":{},"maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"_nodeVersion":"24.15.0","dependencies":{"prop-types":"^15.5.10"},"react-native":"./src/index.js","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.3","metro":"^0.81.0","react":"18.2.0","typescript":"5.0.4","@types/react":"18.2.79","react-native":"0.72.5","@react-native/typescript-config":"0.79.5","@react-native-oh/react-native-harmony-cli":"^0.77.50"},"peerDependencies":{"react-native":">=0.72"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-navbar_1.0.1_1790569192410_0.4786259415649312"}}},"time":{"created":"2026-08-06T07:02:59.296Z","modified":"2026-09-28T04:19:52.701Z","1.0.0":"2026-08-06T07:02:59.670Z","1.0.1":"2026-09-28T04:19:52.495Z"},"license":"MIT","homepage":"https://gitcode.com/rn_ohos_plugin/react_native_navbar","keywords":["react-native","harmony","harmonyos","react-native-navbar"],"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_navbar","type":"git"},"description":"适配鸿蒙版本，提供react_native_navbar组件。","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"readme":"# @bingtang-rn/react-native-navbar for HarmonyOS\r\n\r\n本项目基于 [react-native-navbar](git@github.com:react-native-community/react-native-navbar) 开发，为 React Native 鸿蒙（OpenHarmony）适配版本。如果在使用过程中有任何问题，可以在GitCode提Issue，会及时跟进。issue地址：[issues](https://gitcode.com/rn_ohos_plugin/react_native_navbar/issues)。\r\n\r\n## 版本对应关系\r\n\r\n| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | 编译 API 版本 |\r\n| ------------ | ---------- | ------------ | -------- | ------------- |\r\n| 见发布记录 | 2.1.0 | 0.72+ | 是/否 | API17+ |\r\n\r\n## 安装\r\n\r\n```bash\r\nnpm install @bingtang-rn/react-native-navbar\r\n```\r\n\r\n## 使用\r\n\r\n```tsx\r\nimport NavigationBar from 'react-native-navbar';\r\n\r\n// 1. 配置对象用法（标题 + 左右按钮 + handler 回调）\r\nconst title = { title: '首页', tintColor: '#FFFFFF' };\r\nconst leftButton = {\r\n  title: '返回',\r\n  tintColor: '#80D8FF',\r\n  handler: () => console.log('back'),\r\n};\r\nconst rightButton = {\r\n  title: '下一步',\r\n  tintColor: '#B9F6CA',\r\n  handler: () => console.log('next'),\r\n};\r\n\r\n<NavigationBar\r\n  tintColor=\"#37474F\"\r\n  title={title}\r\n  leftButton={leftButton}\r\n  rightButton={rightButton}\r\n/>\r\n\r\n// 2. 自定义元素插槽（title/leftButton/rightButton 传 React 元素）\r\nconst whiteText = { color: '#fff' };\r\n\r\n<NavigationBar\r\n  tintColor=\"#4A148C\"\r\n  title={<Text style={whiteText}>自定义标题</Text>}\r\n  leftButton={<TouchableOpacity onPress={() => {}}><Text>◀ 返回</Text></TouchableOpacity>}\r\n/>\r\n\r\n// 3. 长标题截断 + 样式定制\r\nconst longTitle = {\r\n  title: '很长的标题文本会被尾部截断',\r\n  tintColor: '#FFFFFF',\r\n  ellipsizeMode: 'tail',\r\n  numberOfLines: 1,\r\n};\r\nconst barStyle = { borderBottomWidth: 1, borderBottomColor: '#ccc' };\r\n\r\n<NavigationBar\r\n  tintColor=\"#006064\"\r\n  style={barStyle}\r\n  title={longTitle}\r\n/>\r\n```\r\n\r\n> import 时使用原库名 `'react-native-navbar'`（由 `harmony.alias` 自动重定向到鸿蒙包），无需使用鸿蒙包名。\r\n\r\n**平台差异**：\r\n- `statusBar` prop 的状态栏定制逻辑（`setBarStyle`/`showHideTransition`/`hidden`）与顶部状态栏占位 View 在源码中被 `Platform.OS === 'ios'` 包裹，HarmonyOS 端不进入该分支，属优雅降级——导航栏本体（标题 + 左右按钮）完整渲染，仅不修改系统状态栏外观。如需鸿蒙端状态栏定制，可在应用层调用 `@ohos.window` 的 `setWindowSystemBarProperties`。\r\n\r\n**权限要求**：\r\n- 无。本库为纯 UI 组件库，不涉及任何 HarmonyOS 运行时权限。\r\n\r\n## Link\r\n\r\n| 版本 | 是否支持 Autolink |\r\n|------|------------------|\r\n| 当前版本 | 是/否 |\r\n\r\n如使用版本支持 Autolink 且工程已接入，可跳过手动配置。\r\n\r\n<details>\r\n<summary>Manual Link 配置</summary>\r\n\r\n> **说明**：本模块需要同时在 C++ 侧和 ETS 侧注册 Package。\r\n\r\n### 1. Overrides RN SDK\r\n\r\n在工程根目录 `oh-package.json5` 添加：\r\n\r\n```json\r\n{\r\n  \"overrides\": {\r\n    \"@rnoh/react-native-openharmony\": \"./react_native_openharmony\"\r\n  }\r\n}\r\n```\r\n\r\n### 2. 引入原生端依赖\r\n\r\n打开 `entry/oh-package.json5`，添加：\r\n\r\n```json\r\n\"dependencies\": {\r\n  \"@bingtang-rn/react-native-navbar\": \"file:../../node_modules/@bingtang-rn/react-native-navbar/harmony/navbar.har\"\r\n}\r\n```\r\n\r\n执行 `ohpm install`。\r\n\r\n### 3. 配置 CMakeLists\r\n\r\n打开 `entry/src/main/cpp/CMakeLists.txt`，添加：\r\n\r\n```cmake\r\nset(OH_MODULES \"${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules\")\r\n\r\nadd_subdirectory(\"${OH_MODULES}/@bingtang-rn/react-native-navbar/src/main/cpp\" ./navbar)\r\n\r\ntarget_link_libraries(rnoh_app PUBLIC navbar)\r\n```\r\n\r\n### 4. 注册 Package（C++ 侧）\r\n\r\n打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：\r\n\r\n```cpp\r\n#include \"NavbarPackage.h\"\r\n\r\nstd::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {\r\n    return {\r\n        std::make_shared<NavbarPackage>(ctx),\r\n    };\r\n}\r\n```\r\n\r\n### 5. 注册 Package（ETS 侧）\r\n\r\n打开 `entry/src/main/ets/RNPackagesFactory.ets`，添加：\r\n\r\n```typescript\r\nimport { NavbarPackage } from '@bingtang-rn/react-native-navbar/ts';\r\n\r\nexport function createRNPackages(ctx: RNPackageContext): RNPackage[] {\r\n  return [\r\n    new NavbarPackage(ctx),\r\n  ];\r\n}\r\n```\r\n\r\n</details>\r\n\r\n## 属性 / API\r\n\r\n| API | 描述 | 参数 | 返回值 | HarmonyOS 支持 |\r\n|-----|------|------|--------|----------------|\r\n| `title` | 标题（配置对象 `{ title, tintColor, ellipsizeMode, numberOfLines, style }` 或 React 元素） | object \\| element \\| null | — | ✅ 完全支持 |\r\n| `leftButton` | 左侧按钮（配置对象 `{ title, tintColor, style, handler, disabled, accessible, accessibilityLabel }` 或 React 元素） | object \\| element \\| null | — | ✅ 完全支持 |\r\n| `rightButton` | 右侧按钮（同 leftButton） | object \\| element \\| null | — | ✅ 完全支持 |\r\n| `tintColor` | 导航栏背景色 | string | — | ✅ 完全支持 |\r\n| `style` | 应用于导航栏本体的样式 | object \\| array | — | ✅ 完全支持 |\r\n| `containerStyle` | 应用于最外层容器的样式 | object \\| array | — | ✅ 完全支持 |\r\n| `statusBar` | 状态栏定制 + 顶部占位 | `{ style, hidden, tintColor, hideAnimation, showAnimation }` | — | ⚠️ 部分支持（仅 iOS 生效，鸿蒙端优雅降级） |\r\n| 按钮 `handler` | 按钮点击回调 | function | void | ✅ 完全支持 |\r\n| 按钮 `disabled` | 禁用按钮（不触发 handler） | boolean | — | ✅ 完全支持 |\r\n| `title.ellipsizeMode` / `numberOfLines` | 标题文本截断 | string / number | — | ✅ 完全支持 |\r\n\r\n### 平台差异\r\n- `statusBar` prop：源码用 `Platform.OS === 'ios'` 包裹全部状态栏逻辑（`StatusBar.setBarStyle`/`showHideTransition`/`hidden`）及顶部高 20 的状态栏占位 View。HarmonyOS 端 `Platform.OS === 'harmony'` 不进入该分支，导航栏本体（标题 + 左右按钮）完整渲染。如需鸿蒙端状态栏定制，可在应用层调用 `@ohos.window` 的 `setWindowSystemBarProperties` / `setWindowSystemBarEnable`（系统级窗口能力）。\r\n\r\n### 使用限制\r\n- 无运行时权限要求。\r\n- 导航栏基于 RN 核心组件（View/Text/TouchableOpacity）由 RNOH 框架映射到 ArkUI，无需原生 Package 注册。\r\n\r\n## 快速验证（运行 Example）\r\n\r\n### 前置条件\r\n\r\n| 依赖 | 版本要求 |\r\n|------|----------|\r\n| Node.js | >= 18 |\r\n| DevEco Studio | 5.0+ / 6.0+ |\r\n| HarmonyOS SDK | API 17+ |\r\n\r\n### 运行步骤\r\n\r\n**1. 克隆仓库**\r\n\r\n```bash\r\ngit clone <仓库地址>\r\ncd <仓库目录>\r\n```\r\n\r\n**2. 安装依赖并构建**\r\n\r\n```bash\r\nnpm install --legacy-peer-deps\r\nnpm pack           # 生成 tgz 包（会自动触发 prepare 构建 JS 产物）\r\n```\r\n\r\n**3. 进入 example 目录，安装依赖**\r\n\r\n```bash\r\ncd example\r\nnpm install --legacy-peer-deps\r\n```\r\n\r\n**4. 生成 JS Bundle**\r\n\r\n```bash\r\nnpm run dev\r\n```\r\n\r\n产物：`harmony/entry/src/main/resources/rawfile/bundle.harmony.js`\r\n\r\n**5. 用 DevEco Studio 打开鸿蒙工程**\r\n\r\n- 打开 DevEco Studio\r\n- 选择 `example/harmony` 目录\r\n- 等待 Sync 完成\r\n\r\n**6. 编译并运行 HAP**\r\n\r\n在 DevEco Studio 中点击运行按钮，将 HAP 安装到设备/模拟器。\r\n\r\n> **注意**：Example 中已预置插件依赖和 Package 注册，无需手动配置 Link。\r\n\r\n## 约束与限制\r\n\r\n### 兼容性\r\n\r\n- RNOH: 0.72+\r\n- HarmonyOS SDK: API 17+\r\n- DevEco Studio: 5.0+\r\n\r\n## 遗留问题\r\n\r\n- `statusBar` prop 的状态栏定制（`setBarStyle`/`hidden`/动画）与顶部占位 View 仅 iOS 生效，HarmonyOS 端优雅降级（导航栏本体完整渲染）。\r\n\r\n## 开源协议\r\n\r\n本项目基于 MIT 协议，详见 [LICENSE](./LICENSE) 文件。\r\n","readmeFilename":"README.md"}