{"_id":"@bingtang-rn/react-native-auto-height-image","_rev":"2-e02534f35e79608a703f013ae8eff607","name":"@bingtang-rn/react-native-auto-height-image","dist-tags":{"latest":"3.2.5"},"versions":{"3.2.4":{"name":"@bingtang-rn/react-native-auto-height-image","version":"3.2.4","keywords":["react-native","harmony","harmonyos","react-native-auto-height-image"],"license":"MIT","_id":"@bingtang-rn/react-native-auto-height-image@3.2.4","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_auto_height_image","dist":{"shasum":"3dfdc02f74c0ec8f33c38ee89aae8f25d7136d2d","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-auto-height-image/-/react-native-auto-height-image-3.2.4.tgz","fileCount":11,"integrity":"sha512-0JodSvgAfH4nUCsxBuCr+wyczC7AcGs7CbR0e6K89YFAYMWRZB7jQFBwGGJLsuYlJr+SEVRg0qBavy/p+98hdA==","signatures":[{"sig":"MEUCIBDc+v9FboKYhBd+QmzAB1DUq3XfFokdZy4jyFD+JXjVAiEAoWuatQbu4myn1emR+LPY0s0MPQ+FEKJ18L68/bQNLaY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19292},"main":"./src/index.js","types":"./src/index.d.ts","engines":{"node":">=18"},"gitHead":"cc9e751a188e392c40b020b8b9a1066c8fed7b58","harmony":{"alias":"react-native-auto-height-image"},"private":false,"_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_auto_height_image","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_auto_height_image组件。","directories":{},"_nodeVersion":"24.15.0","dependencies":{"prop-types":"^15.7.2"},"react-native":"./src/index.js","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"react":"18.2.0","typescript":"5.0.4","@types/react":"18.2.79","react-native":"0.72.5"},"peerDependencies":{"react":">=17.0.0","react-native":">=0.72"},"_npmOperationalInternal":{"tmp":"tmp/react-native-auto-height-image_3.2.4_1785417837987_0.045878701118481136","host":"s3://npm-registry-packages-npm-production"}},"3.2.5":{"_id":"@bingtang-rn/react-native-auto-height-image@3.2.5","dist":{"shasum":"5ae18dc312dce145a0fb995451cf44ac06a1ed24","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-auto-height-image/-/react-native-auto-height-image-3.2.5.tgz","fileCount":11,"integrity":"sha512-kBquY/qMtFisXdiw8upU3vdYRYbYm91tnRPssYkgfgM+zf7FMiB5EQtkwt28g3wzDtKTnh39fkT1OCYU1McOXg==","signatures":[{"sig":"MEUCIQCGK1uHvQf5FE2RNyRN2z1vwFKWOteFgXrsTsSsL6S/XgIgfBrIlMRtzBtWLXX/hGXbCQd7dmkQVhtjKRiX/0rueGU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFK4jmzmJKdnOgOjRl5/6cYyGKYq8AwOnXu7i80QBkoYAiEAk212jndyVHqLMhaYE1DAg+aRPrBDaCSXxAov6ePShPw="}],"unpackedSize":19566},"main":"./src/index.js","name":"@bingtang-rn/react-native-auto-height-image","_from":"file:bingtang-rn-react-native-auto-height-image-3.2.5.tgz","types":"./src/index.d.ts","engines":{"node":">=18"},"harmony":{"alias":"react-native-auto-height-image"},"license":"MIT","private":false,"version":"3.2.5","_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_auto_height_image","keywords":["react-native","harmony","harmonyos","react-native-auto-height-image"],"_resolved":"D:\\code\\rn\\npm\\batch\\react_native_auto_height_image\\bingtang-rn-react-native-auto-height-image-3.2.5.tgz","_integrity":"sha512-kBquY/qMtFisXdiw8upU3vdYRYbYm91tnRPssYkgfgM+zf7FMiB5EQtkwt28g3wzDtKTnh39fkT1OCYU1McOXg==","repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_auto_height_image","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_auto_height_image组件。","directories":{},"maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"_nodeVersion":"24.15.0","dependencies":{"prop-types":"^15.7.2"},"react-native":"./src/index.js","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"react":"18.2.0","typescript":"5.0.4","@types/react":"18.2.79","react-native":"0.72.5"},"peerDependencies":{"react":">=17.0.0","react-native":">=0.72"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-auto-height-image_3.2.5_1790568535352_0.20718170963492621"}}},"time":{"created":"2026-07-30T13:23:57.850Z","modified":"2026-09-28T04:08:55.617Z","3.2.4":"2026-07-30T13:23:58.175Z","3.2.5":"2026-09-28T04:08:55.434Z"},"license":"MIT","homepage":"https://gitcode.com/rn_ohos_plugin/react_native_auto_height_image","keywords":["react-native","harmony","harmonyos","react-native-auto-height-image"],"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_auto_height_image","type":"git"},"description":"适配鸿蒙版本，提供react_native_auto_height_image组件。","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"readme":"# @bingtang-rn/react-native-auto-height-image for HarmonyOS\r\n\r\n本项目基于 [react-native-auto-height-image](git@github.com:vivaxy/react-native-auto-height-image) 开发，为 React Native 鸿蒙（OpenHarmony）适配版本。如果在使用过程中有任何问题，可以在GitCode提Issue，会及时跟进。issue地址：[issues](https://gitcode.com/rn_ohos_plugin/react_native_auto_height_image/issues)。\r\n\r\n## 版本对应关系\r\n\r\n| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | 编译 API 版本 |\r\n| ------------ | ---------- | ------------ | -------- | ------------- |\r\n| 见发布记录 | 3.2.4 | 0.72+ | 是 | API17+ |\r\n\r\n## 安装\r\n\r\n```bash\r\nnpm install @bingtang-rn/react-native-auto-height-image\r\n```\r\n\r\n## 使用\r\n\r\n```tsx\r\nimport AutoHeightImage from 'react-native-auto-height-image';\r\nimport localImage from './assets/image.png';\r\n\r\nconst remoteSource = { uri: 'https://picsum.photos/id/1/350/150' };\r\nconst wrongSource = { uri: 'https://example.com/missing.png' };\r\n\r\n// 远程图片自动高度\r\n<AutoHeightImage\r\n  width={200}\r\n  source={remoteSource}\r\n  onHeightChange={(height) => console.log('height:', height)}\r\n/>\r\n\r\n// 本地图片\r\n<AutoHeightImage width={200} source={localImage} />\r\n\r\n// 错误回退 + 动画\r\n<AutoHeightImage\r\n  width={200}\r\n  source={wrongSource}\r\n  fallbackSource={localImage}\r\n  animated={true}\r\n  onError={(e) => console.warn(e)}\r\n/>\r\n```\r\n\r\n> import 时使用原库名 `'react-native-auto-height-image'`，而非鸿蒙包名（由 RNOH `harmony.alias` 自动重定向）。\r\n\r\n**平台差异**：\r\n- 本库为纯 JS 组件（js-only），无需手动 Link（无需 C++/ETS Package 注册），`npm install` 后通过 `harmony.alias` 自动重定向 import。\r\n- `Image.resolveAssetSource`、`Image.getSize`、`Image.prefetch` 均由 RNOH 框架实现，鸿蒙端可用。\r\n- `ImagePolyfill` 的 Android 404 polyfill 在鸿蒙端不激活（`Platform.OS === 'android'` 不命中）；`onError` 经 `Image.getSize` 失败路径触发，行为正确。\r\n\r\n**权限要求**：\r\n- 加载远程图片需在 `module.json5` 声明 `ohos.permission.INTERNET`（system_grant，安装时自动授予）。\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-auto-height-image\": \"file:../../node_modules/@bingtang-rn/react-native-auto-height-image/harmony/auto_height_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-auto-height-image/src/main/cpp\" ./auto_height_image)\r\n\r\ntarget_link_libraries(rnoh_app PUBLIC auto_height_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 \"AutoHeightImagePackage.h\"\r\n\r\nstd::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {\r\n    return {\r\n        std::make_shared<AutoHeightImagePackage>(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 { AutoHeightImagePackage } from '@bingtang-rn/react-native-auto-height-image/ts';\r\n\r\nexport function createRNPackages(ctx: RNPackageContext): RNPackage[] {\r\n  return [\r\n    new AutoHeightImagePackage(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| source | 图片源（本地 require id 或远程 uri） | number \\| { uri: string } | — | ✅ 完全支持 |\r\n| width | 目标宽度，据此等比计算高度 | number | — | ✅ 完全支持 |\r\n| maxHeight | 高度上限，超过截断 | number（默认 Infinity） | — | ✅ 完全支持 |\r\n| fallbackSource | 主源加载失败时的回退源 | number \\| { uri: string } | — | ✅ 完全支持 |\r\n| onHeightChange | 高度变化回调（height 可能为 0） | (height: number) => void | — | ✅ 完全支持 |\r\n| animated | 为 true 时底层用 Animated.Image | boolean（默认 false） | — | ✅ 完全支持 |\r\n| children | 有子元素时底层用 ImageBackground | ReactNode | — | ✅ 完全支持 |\r\n| onError | 图片加载错误回调 | (e: NativeSyntheticEvent) => void | — | ✅ 完全支持 |\r\n| ...ImageProps | 继承 RN Image 其余 props（除 resizeMode） | ImageProps | — | ✅ 完全支持 |\r\n\r\n### 平台差异\r\n- `ImagePolyfill`（Android 404 prefetch polyfill）在鸿蒙端不激活；RNOH Image 的 `onError` 对远程图片失败（含 404）正常触发，`onError` 经 `Image.getSize` 失败路径到达回调，行为正确。\r\n- 原库深路径 import `react-native/Libraries/Image/resolveAssetSource` 已改为公开 API `Image.resolveAssetSource`（RNOH 已实现，返回 `{ width, height, uri }`）。\r\n- RN 0.72+ 已移除 `Image.propTypes`，适配代码已移除相关 propTypes 声明（React 17+ 不再校验 propTypes，行为等价）。\r\n\r\n### 使用限制\r\n- 加载远程图片需声明 `ohos.permission.INTERNET`。\r\n- `source` 为 `number` 时走 `Image.resolveAssetSource`（本地资源）；为 `{ uri }` 时走 `Image.getSize`（远程图片）。\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/vivaxy/react-native-auto-height-image/blob/master/LICENSE)，详见 [LICENSE](./LICENSE) 文件。\r\n","readmeFilename":"README.md"}