{"_id":"@bingtang-rn/react-native-blur-view","_rev":"3-23fa28f2e28a1d1a9e301e57c2510c0b","name":"@bingtang-rn/react-native-blur-view","dist-tags":{"latest":"3.0.2"},"versions":{"3.0.0":{"name":"@bingtang-rn/react-native-blur-view","version":"3.0.0","keywords":["react-native","harmony","harmonyos","react-native-blur-view"],"license":"MIT","_id":"@bingtang-rn/react-native-blur-view@3.0.0","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_blur_view","dist":{"shasum":"00fa55c1f5d1a9797478078ced85e3c79ff62976","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-blur-view/-/react-native-blur-view-3.0.0.tgz","fileCount":53,"integrity":"sha512-4tlII7mKR4isDM6jwWmE5BG+ecg532Fg+Fjw6ZQXnFw7dJKs635xg2adGulKYVK5idZUs0bvlKzhVtWnHwDM8g==","signatures":[{"sig":"MEQCIAVBEtd04hTjxupBiG/LceiUNzS+XAzCSOAJR5APfruVAiAjrDMh5e1RosU75sXqCEWeyazAXNAK4BJvGKrQPAxGKw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":77371},"main":"./src/index.tsx","module":"./src/index.tsx","engines":{"node":">=18"},"gitHead":"871206dcbfd3eece49b5aaaec0fbdabc56c6243b","harmony":{"alias":"@danielsaraldi/react-native-blur-view","autolinking":{"ohPackageName":"@oh-rn/react-native-blur-view","cppPackageClassName":"BlurViewPackage","etsPackageClassName":"BlurViewPackage","cmakeLibraryTargetName":"blur_view"},"codegenConfig":[{"version":1,"specPaths":["./src/specs/v1"]}]},"private":false,"scripts":{"prepare":"echo skip","codegen-lib":"react-native codegen-harmony --cpp-output-path ./harmony/blur_view/src/main/cpp/generated --ets-output-path ./harmony/blur_view/src/main/ets/generated"},"_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_blur_view","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_blur_view组件。","directories":{},"_nodeVersion":"24.15.0","react-native":"./src/index.tsx","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-blur-view_3.0.0_1785417929388_0.8425372498543606","host":"s3://npm-registry-packages-npm-production"}},"3.0.1":{"name":"@bingtang-rn/react-native-blur-view","version":"3.0.1","keywords":["react-native","harmony","harmonyos","react-native-blur-view"],"license":"MIT","_id":"@bingtang-rn/react-native-blur-view@3.0.1","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_blur_view","dist":{"shasum":"967252b5a9028a6d023349fe279a514bec0d441a","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-blur-view/-/react-native-blur-view-3.0.1.tgz","fileCount":53,"integrity":"sha512-sLWBD9H0gREYIhdY9UoRxD7uzQTs4hkPdenYaiVif/gF17PY5sHF8t49C6c/s2ntlEg9uS0cdYQH9+ppikt8AA==","signatures":[{"sig":"MEUCIQCeGE8eUIKgL6B3X3kmVhB6c9sQ9kG99VJvnMImMVgwagIgHlktbOju4MtZi2fHZ/ZtGakLZvwNI3VWMOCR9d/cTAo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIQD8+jQ9u1CNZFwFiThAnyyO6A8DYPu8tSL0TEdIFtGyAgIgIJUkZAtA488YyApp6EmtdXLumydjLH4+2lgLHbDqeTs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":77498},"main":"./src/index.tsx","_from":"file:bingtang-rn-react-native-blur-view-3.0.1.tgz","module":"./src/index.tsx","engines":{"node":">=18"},"harmony":{"alias":"@danielsaraldi/react-native-blur-view","autolinking":{"ohPackageName":"@oh-rn/react-native-blur-view","cppPackageClassName":"BlurViewPackage","etsPackageClassName":"BlurViewPackage","cmakeLibraryTargetName":"blur_view"},"codegenConfig":[{"version":1,"specPaths":["./src/specs/v1"]}]},"private":false,"scripts":{"prepare":"echo skip","codegen-lib":"react-native codegen-harmony --cpp-output-path ./harmony/blur_view/src/main/cpp/generated --ets-output-path ./harmony/blur_view/src/main/ets/generated"},"_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"_resolved":"D:\\code\\rn\\npm\\batch\\react_native_blur_view\\bingtang-rn-react-native-blur-view-3.0.1.tgz","_integrity":"sha512-sLWBD9H0gREYIhdY9UoRxD7uzQTs4hkPdenYaiVif/gF17PY5sHF8t49C6c/s2ntlEg9uS0cdYQH9+ppikt8AA==","repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_blur_view","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_blur_view组件。","directories":{},"_nodeVersion":"24.15.0","react-native":"./src/index.tsx","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-blur-view_3.0.1_1790565884401_0.2195182363620991","host":"s3://npm-registry-packages-npm-production"}},"3.0.2":{"_id":"@bingtang-rn/react-native-blur-view@3.0.2","dist":{"shasum":"608df051e3560ddb86bebc34532698df7ca5a07d","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-blur-view/-/react-native-blur-view-3.0.2.tgz","fileCount":53,"integrity":"sha512-Y59pM8MjG0vaoWOPZPUkTEwoyTAZpCX5ElyTuwtaROJaJcI9MeN2YfK+t9UwTG/ZvwEN9hUurOVrVLXz44BIwQ==","signatures":[{"sig":"MEUCIFHnlwvZodsFfzyQU2ydQvjroPjl18Vep5N79VB4+QCzAiEAwm7JKfsW551g75LA9njSvFbZh6DiKBb9LOpOA9wwO5Y=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDXs2kWijl4P/gCrbuYlcpTEnJnSnbwpso5K7S7kFViqgIhAPeZKCdRxR+cO6oQjpNpB5lPnMiIaAQ17oHTYhj7o9MU"}],"unpackedSize":77508},"main":"./src/index.tsx","name":"@bingtang-rn/react-native-blur-view","_from":"file:bingtang-rn-react-native-blur-view-3.0.2.tgz","module":"./src/index.tsx","engines":{"node":">=18"},"harmony":{"alias":"@danielsaraldi/react-native-blur-view","autolinking":{"ohPackageName":"@bingtang-rn/react-native-blur-view","cppPackageClassName":"BlurViewPackage","etsPackageClassName":"BlurViewPackage","cmakeLibraryTargetName":"blur_view"},"codegenConfig":[{"version":1,"specPaths":["./src/specs/v1"]}]},"license":"MIT","private":false,"scripts":{"prepare":"echo skip","codegen-lib":"react-native codegen-harmony --cpp-output-path ./harmony/blur_view/src/main/cpp/generated --ets-output-path ./harmony/blur_view/src/main/ets/generated"},"version":"3.0.2","_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_blur_view","keywords":["react-native","harmony","harmonyos","react-native-blur-view"],"_resolved":"D:\\code\\rn\\npm\\batch\\react_native_blur_view\\bingtang-rn-react-native-blur-view-3.0.2.tgz","_integrity":"sha512-Y59pM8MjG0vaoWOPZPUkTEwoyTAZpCX5ElyTuwtaROJaJcI9MeN2YfK+t9UwTG/ZvwEN9hUurOVrVLXz44BIwQ==","repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_blur_view","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_blur_view组件。","directories":{},"maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"_nodeVersion":"24.15.0","react-native":"./src/index.tsx","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-blur-view_3.0.2_1790567598937_0.017540772701483798"}}},"time":{"created":"2026-07-30T13:25:13.715Z","modified":"2026-09-28T03:53:19.220Z","3.0.0":"2026-07-30T13:25:29.528Z","3.0.1":"2026-09-28T03:24:44.493Z","3.0.2":"2026-09-28T03:53:19.025Z"},"license":"MIT","homepage":"https://gitcode.com/rn_ohos_plugin/react_native_blur_view","keywords":["react-native","harmony","harmonyos","react-native-blur-view"],"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_blur_view","type":"git"},"description":"适配鸿蒙版本，提供react_native_blur_view组件。","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"readme":"# @bingtang-rn/react-native-blur-view for HarmonyOS\r\n\r\n本项目基于 [@danielsaraldi/react-native-blur-view](https://github.com/DanielAraldi/react-native-blur-view) 开发，为 React Native 鸿蒙（OpenHarmony）适配版本。如果在使用过程中有任何问题，可以在GitCode提Issue，会及时跟进。issue地址：[issues](https://gitcode.com/rn_ohos_plugin/react_native_blur_view/issues)。\r\n\r\n## 版本对应关系\r\n\r\n| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | 编译 API 版本 |\r\n| ------------ | ---------- | ------------ | -------- | ------------- |\r\n| 1.0.0 | 3.0.0 | 0.72+ | 是 | API17+ |\r\n\r\n## 安装\r\n\r\n```bash\r\nnpm install @bingtang-rn/react-native-blur-view\r\n```\r\n\r\n## 使用\r\n\r\n```tsx\r\nimport { BlurView, VibrancyView, BlurTarget } from '@danielsaraldi/react-native-blur-view';\r\n\r\n// 基本模糊效果\r\n<BlurView type=\"light\" radius={10} style={styles.blur}>\r\n  <Text>Blurred background</Text>\r\n</BlurView>\r\n\r\n// Vibrancy 效果（鸿蒙端降级为模糊 View）\r\n<VibrancyView type=\"material\" effectStyle=\"label\" radius={20}>\r\n  <Text>Vibrant text</Text>\r\n</VibrancyView>\r\n\r\n// 模糊目标（鸿蒙端降级为普通 View）\r\n<BlurTarget ref={targetRef} style={styles.target}>\r\n  <Text>Target area</Text>\r\n</BlurTarget>\r\n```\r\n\r\n> import 时使用原库名 `'@danielsaraldi/react-native-blur-view'`，而非鸿蒙包名。\r\n\r\n**平台差异**：\r\n- HarmonyOS 上 `VibrancyView` 降级为带模糊效果的 View（无 iOS UIVibrancyEffect），`effectStyle` 映射到不同 BlurStyle\r\n- HarmonyOS 上 `BlurTarget` 降级为普通 View，`blurTarget` / `targetId` 属性被忽略（`backgroundBlurStyle` 自动模糊背后内容）\r\n- `downscaleFactor` 属性在 HarmonyOS 上被忽略（Android 专用性能参数）\r\n- `reducedTransparencyFallbackColor` 属性在 HarmonyOS 上被忽略（iOS 无障碍特性）\r\n- `androidColor` 属性在 HarmonyOS 上被忽略（Android 专用）\r\n- BlurType 的 `-light`/`-dark` 后缀变体在 HarmonyOS 上映射到同一 BlurStyle 基础值（不区分色彩模式变体）\r\n\r\n**权限要求**：\r\n- 无需任何权限\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-blur-view\": \"file:../../node_modules/@bingtang-rn/react-native-blur-view/harmony/blur_view.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-blur-view/src/main/cpp\" ./blur_view)\r\n\r\ntarget_link_libraries(rnoh_app PUBLIC blur_view)\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 \"BlurViewPackage.h\"\r\n\r\nstd::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {\r\n    return {\r\n        std::make_shared<BlurViewPackage>(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 { BlurViewPackage } from '@bingtang-rn/react-native-blur-view/ts';\r\n\r\nexport function createRNPackages(ctx: RNPackageContext): RNPackage[] {\r\n  return [\r\n    new BlurViewPackage(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| BlurView | 模糊效果组件 | type: BlurType, radius: number, overlayColor: ColorValue | — | ✅ 完全支持 |\r\n| BlurView.type | 模糊类型（21 种） | BlurType | — | ✅ 完全支持 |\r\n| BlurView.radius | 模糊半径 0~100 | number (默认 10) | — | ✅ 完全支持 |\r\n| BlurView.overlayColor | 自定义叠加色 | ColorValue | — | ✅ 完全支持 |\r\n| BlurView.downscaleFactor | 缩小因子 | number (默认 6) | — | ⚠️ 鸿蒙端忽略（Android 专用） |\r\n| BlurView.reducedTransparencyFallbackColor | 减少透明度替代色 | ColorValue (默认 'white') | — | ⚠️ 鸿蒙端忽略（iOS 专用） |\r\n| BlurView.androidColor | Android 叠加色 | ColorValue | — | ⚠️ 鸿蒙端忽略（Android 专用） |\r\n| BlurView.blurTarget | 关联 BlurTarget | RefObject\\<View\\> | — | ⚠️ 鸿蒙端忽略（Android 专用） |\r\n| VibrancyView | 活力模糊组件 | type, effectStyle, radius, overlayColor | — | ⚠️ 部分支持 |\r\n| VibrancyView.type | 模糊类型 | BlurType (默认 'light') | — | ✅ 完全支持 |\r\n| VibrancyView.effectStyle | 活力效果样式 | EffectStyle (默认 'label') | — | ⚠️ 部分支持（降级为不同 BlurStyle 映射） |\r\n| VibrancyView.radius | 模糊半径 | number (默认 10) | — | ✅ 完全支持 |\r\n| VibrancyView.overlayColor | 自定义叠加色 | ColorValue | — | ✅ 完全支持 |\r\n| VibrancyView.reducedTransparencyFallbackColor | 减少透明度替代色 | ColorValue (默认 'white') | — | ⚠️ 鸿蒙端忽略（iOS 专用） |\r\n| BlurTarget | 模糊目标组件 | ViewProps | — | ⚠️ 部分支持（降级为普通 View） |\r\n\r\n### 平台差异\r\n- `VibrancyView`：HarmonyOS 无 UIVibrancyEffect 概念，`effectStyle` 映射到 `BlurStyle` 枚举近似实现\r\n- `BlurTarget`：HarmonyOS `backgroundBlurStyle` 直接模糊组件背景，无需指定目标区域\r\n\r\n### 未实现功能\r\n| API | 原因 |\r\n|-----|------|\r\n| BlurView.downscaleFactor | Android 专用性能参数，鸿蒙 backdropBlur 无需此参数 |\r\n| BlurView.reducedTransparencyFallbackColor | iOS 无障碍「减少透明度」特性，鸿蒙无对应系统级设置 API |\r\n| BlurView.androidColor | Android 专用叠加色覆盖 |\r\n| BlurView.blurTarget / targetId | Android 专用 BlurTarget 关联机制 |\r\n| VibrancyView 的 iOS UIVibrancyEffect | 鸿蒙无对应 API，已降级为 backgroundBlurStyle + backdropBlur |\r\n| BlurType -light/-dark 模式变体 | 鸿蒙 BlurStyle 无 colorMode 关联变体 |\r\n\r\n### 使用限制\r\n- 无需声明任何权限\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无（或列出已知问题）\r\n\r\n## 开源协议\r\n\r\n本项目基于 [MIT License](https://github.com/DanielAraldi/react-native-blur-view/blob/main/LICENSE)，详见 [LICENSE](./LICENSE) 文件。\r\n","readmeFilename":"README.md"}