{"_id":"@bingtang-rn/react-native-blasted-image","_rev":"2-0bce172923fc40732e4c6e79a368e656","name":"@bingtang-rn/react-native-blasted-image","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@bingtang-rn/react-native-blasted-image","version":"1.0.0","keywords":["react-native","harmony","harmonyos","react-native-blasted-image"],"license":"MIT, BSD, Apache-2.0","_id":"@bingtang-rn/react-native-blasted-image@1.0.0","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_blasted_image","dist":{"shasum":"e55eb11da9ff05b2220a68c9c016320b9ff019af","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-blasted-image/-/react-native-blasted-image-1.0.0.tgz","fileCount":36,"integrity":"sha512-KeSZ2VtEeLzJ9X15FZq9HPWmUN4gODzb1Ti+iZ7RLd+HFIeXBUorWnS0rcKv32YQcC3KO4ssrSMPyPqDwgFOCg==","signatures":[{"sig":"MEQCIEdfcpzrRmgrxe6EdFlyQUWgWp7s+9PI6pe4c5QM6a9tAiA8R9LCWk3cTP5NoevOWiq4flRvnWaOzI0e3dr6/zydwA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":105832},"main":"./src/index.tsx","module":"./src/index.tsx","engines":{"node":">=18"},"gitHead":"2d064efc41fea399fb704c941c3506b6571d7f26","harmony":{"alias":"react-native-blasted-image","autolinking":{"ohPackageName":"@oh-rn/react-native-blasted-image","cppPackageClassName":"BlastedImagePackage","etsPackageClassName":"BlastedImagePackage","cmakeLibraryTargetName":"blasted_image"},"codegenConfig":[{"version":1,"specPaths":["./src/specs/v1"]}]},"private":false,"scripts":{"prepare":"echo skip","codegen-lib":"react-native codegen-harmony --cpp-output-path ./harmony/blasted_image/src/main/cpp/generated --ets-output-path ./harmony/blasted_image/src/main/ets/generated"},"_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_blasted_image","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_blasted_image组件。","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-blasted-image_1.0.0_1785999725379_0.16812809807845497","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"_id":"@bingtang-rn/react-native-blasted-image@1.0.1","dist":{"shasum":"8766dfe386a537f08ca8b917d359a1691eacded8","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-blasted-image/-/react-native-blasted-image-1.0.1.tgz","fileCount":36,"integrity":"sha512-+9W8IhAxg1nnIkTkc8W3piAkThw++RZcyQwoVr+LrP7CaiuFFbvwVZwDbDpxCI/EHAwFg+y3yxFoiL7QEdFCjw==","signatures":[{"sig":"MEUCIQDufoZHErgOrgWtKq6o0GbVhMMsR5KXXNlpHYdbYNr+NQIgCAw/OVSK8GssA4o0eM1LzWW6yQvZWbK0PG9T9vdShiM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIE2WvklZKQI2aa+TP22lu98eDcatXYnqsbUWdGKmmUciAiEAwtWe8yiVc6bqoEoWPSDFyVll33L0m9Zprk2v8klIlkI="}],"unpackedSize":105702},"main":"./src/index.tsx","name":"@bingtang-rn/react-native-blasted-image","_from":"file:bingtang-rn-react-native-blasted-image-1.0.1.tgz","module":"./src/index.tsx","engines":{"node":">=18"},"harmony":{"alias":"react-native-blasted-image","autolinking":{"ohPackageName":"@bingtang-rn/react-native-blasted-image","cppPackageClassName":"BlastedImagePackage","etsPackageClassName":"BlastedImagePackage","cmakeLibraryTargetName":"blasted_image"},"codegenConfig":[{"version":1,"specPaths":["./src/specs/v1"]}]},"license":"MIT, BSD, Apache-2.0","private":false,"scripts":{"prepare":"echo skip","codegen-lib":"react-native codegen-harmony --cpp-output-path ./harmony/blasted_image/src/main/cpp/generated --ets-output-path ./harmony/blasted_image/src/main/ets/generated"},"version":"1.0.1","_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_blasted_image","keywords":["react-native","harmony","harmonyos","react-native-blasted-image"],"_resolved":"D:\\code\\rn\\npm\\batch\\react_native_blasted_image\\bingtang-rn-react-native-blasted-image-1.0.1.tgz","_integrity":"sha512-+9W8IhAxg1nnIkTkc8W3piAkThw++RZcyQwoVr+LrP7CaiuFFbvwVZwDbDpxCI/EHAwFg+y3yxFoiL7QEdFCjw==","repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_blasted_image","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_blasted_image组件。","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-blasted-image_1.0.1_1790568888450_0.0918484629759917"}}},"time":{"created":"2026-08-06T07:02:05.229Z","modified":"2026-09-28T04:14:48.890Z","1.0.0":"2026-08-06T07:02:05.539Z","1.0.1":"2026-09-28T04:14:48.543Z"},"license":"MIT, BSD, Apache-2.0","homepage":"https://gitcode.com/rn_ohos_plugin/react_native_blasted_image","keywords":["react-native","harmony","harmonyos","react-native-blasted-image"],"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_blasted_image","type":"git"},"description":"适配鸿蒙版本，提供react_native_blasted_image组件。","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"readme":"# @bingtang-rn/react-native-blasted-image for HarmonyOS\r\n\r\n本项目基于 [react-native-blasted-image](https://github.com/xerdnu/react-native-blasted-image) 开发，为 React Native 鸿蒙（OpenHarmony）适配版本。如果在使用过程中有任何问题，可以在GitCode提Issue，会及时跟进。issue地址：[issues](https://gitcode.com/rn_ohos_plugin/react_native_blasted_image/issues)。\r\n\r\n## 版本对应关系\r\n\r\n| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | 编译 API 版本 |\r\n| ------------ | ---------- | ------------ | -------- | ------------- |\r\n| 1.0.0 | 1.1.6 | 0.72+ | 是 | API17+ |\r\n\r\n## 安装\r\n\r\n```bash\r\nnpm install @bingtang-rn/react-native-blasted-image\r\n```\r\n\r\n## 使用\r\n\r\n```tsx\r\nimport BlastedImage, { loadImage } from 'react-native-blasted-image';\r\n\r\n// 远程图片\r\nconst src = { uri: 'https://example.com/img.png' };\r\n<BlastedImage source={src} width={120} height={120} />\r\n\r\n// tintColor + resizeMode\r\n<BlastedImage\r\n  source={src}\r\n  resizeMode=\"contain\"\r\n  tintColor=\"#FF0000\"\r\n  width={100}\r\n  height={100}\r\n/>\r\n\r\n// 预加载（带重试）\r\nawait loadImage('https://example.com/img.png', false, false, null, null, 3, null);\r\nawait BlastedImage.preload([{ uri: 'https://example.com/img.png' }]);\r\n\r\n// 清缓存\r\nawait BlastedImage.clearMemoryCache();\r\nawait BlastedImage.clearDiskCache();\r\nawait BlastedImage.clearAllCaches();\r\n```\r\n\r\n> import 时使用原库名 `'react-native-blasted-image'`，而非鸿蒙包名（由 `harmony.alias` 自动映射）。\r\n\r\n**平台差异**：\r\n- HarmonyOS 端图片缓存由 `BlastedImageCache` 自建（ArkUI Image 自带缓存不支持自定义 cacheKey），内存缓存为 `Map<string, PixelMap>`，磁盘缓存为 `<cacheDir>/blasted-image/*.bin`。\r\n- `hybridAssets` 本地优先：鸿蒙端从 `rawfile/blasted-image/` 读取本地副本，未命中才走网络。需手动将资源拷入该目录（Expo config plugin 不适用于鸿蒙）。\r\n- `tintColor` 支持 `#RGB`/`#RRGGBB`/`#AARRGGBB`/`RRGGBB`/命名颜色（black/white/red/...），通过 `renderMode(Template)` + `fillColor` 实现。\r\n\r\n**权限要求**：\r\n- 需在 `module.json5` 声明 `ohos.permission.INTERNET`（网络图片加载）。\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-blasted-image\": \"file:../../node_modules/@bingtang-rn/react-native-blasted-image/harmony/blasted_image.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-blasted-image/src/main/cpp\" ./blasted_image)\r\n\r\ntarget_link_libraries(rnoh_app PUBLIC blasted_image)\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 \"BlastedImagePackage.h\"\r\n\r\nstd::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {\r\n    return {\r\n        std::make_shared<BlastedImagePackage>(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 { BlastedImagePackage } from '@bingtang-rn/react-native-blasted-image/ts';\r\n\r\nexport function createRNPackages(ctx: RNPackageContext): RNPackage[] {\r\n  return [\r\n    new BlastedImagePackage(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| BlastedImage (组件) | 图片组件 | source, resizeMode, tintColor, width, height, isBackground, returnSize, fallbackSource, retries, cacheKeyExtractor, onLoad, onError | — | ✅ 完全支持 |\r\n| loadImage | 预加载/缓存远程图片 | imageUrl, skipMemoryCache, hybridAssets, cloudUrl, headers, retries, cacheKey | Promise<{wasRetried}> | ✅ 完全支持 |\r\n| preload | 批量预加载 | input: object\\|array, options | Promise<void> | ✅ 完全支持 |\r\n| clearMemoryCache | 清内存缓存 | 无 | Promise<void> | ✅ 完全支持 |\r\n| clearDiskCache | 清磁盘缓存 | 无 | Promise<void> | ✅ 完全支持 |\r\n| clearAllCaches | 清全部缓存 | 无 | Promise<void> | ✅ 完全支持 |\r\n| BlastedEventLoaded | 加载完成事件 | — | {message: string} | ✅ 完全支持 |\r\n| BlastedEventClearedMemory | 内存缓存已清事件 | — | {message: string} | ✅ 完全支持 |\r\n| BlastedEventClearedDisk | 磁盘缓存已清事件 | — | {message: string} | ✅ 完全支持 |\r\n| BlastedEventClearedAll | 全部缓存已清事件 | — | {message: string} | ✅ 完全支持 |\r\n| BlastedEventLog | 日志事件 | — | {message: string} | ✅ 完全支持 |\r\n\r\n### 平台差异\r\n- `resizeMode=\"repeat\"`：原库 Android/iOS 未实现 repeat 分支，鸿蒙端回退为 cover（与原库行为一致）。\r\n- `returnSize`：依赖 RNOH 的 `Image.getSize` 实现获取远程图片尺寸。\r\n- `BlastedEventLoaded` 的 message 格式为 `[BlastedImage] (MEMORY|LOCAL|DISK|NETWORK) <url>`，与 Android 端一致。\r\n\r\n### 未实现功能\r\n| 功能 | 原因 |\r\n|-----|------|\r\n| AVIF 格式 | 鸿蒙 Image Kit ImageSource 不支持 AVIF 解码（仅 JPEG/PNG/GIF/WebP/BMP/SVG/ICO/HEIC） |\r\n| APNG 格式 | ArkUI 不支持 APNG 动画 |\r\n| Expo config plugin | Expo 不支持鸿蒙，hybridAssets 需手动拷入 rawfile/blasted-image/ |\r\n\r\n### 使用限制\r\n- 网络图片加载需声明 `ohos.permission.INTERNET`。\r\n- HTTP 明文流量默认禁止，加载 `http://` 图片需在 `module.json5` 配置 cleartext。\r\n- `hybridAssets` 本地资源需手动放入 `entry/src/main/resources/rawfile/blasted-image/` 目录。\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- AVIF/APNG 格式不支持（鸿蒙 Image Kit 无对应解码器）。\r\n- Expo config plugin 不适用于鸿蒙，hybridAssets 需手动拷入 rawfile。\r\n\r\n## 开源协议\r\n\r\n本项目基于 [MIT](https://github.com/xerdnu/react-native-blasted-image/blob/master/LICENSE) 协议，详见 [LICENSE](./LICENSE) 文件。\r\n","readmeFilename":"README.md"}