@bingtang-rn/react-native-auto-height-image for HarmonyOS

本项目基于 react-native-auto-height-image 开发，为 React Native 鸿蒙（OpenHarmony）适配版本。如果在使用过程中有任何问题，可以在GitCode提Issue，会及时跟进。issue地址：issues。

版本对应关系

安装

npm install @bingtang-rn/react-native-auto-height-image

使用

import AutoHeightImage from 'react-native-auto-height-image';
import localImage from './assets/image.png';

const remoteSource = { uri: 'https://picsum.photos/id/1/350/150' };
const wrongSource = { uri: 'https://example.com/missing.png' };

// 远程图片自动高度
<AutoHeightImage
  width={200}
  source={remoteSource}
  onHeightChange={(height) => console.log('height:', height)}
/>

// 本地图片
<AutoHeightImage width={200} source={localImage} />

// 错误回退 + 动画
<AutoHeightImage
  width={200}
  source={wrongSource}
  fallbackSource={localImage}
  animated={true}
  onError={(e) => console.warn(e)}
/>

import 时使用原库名 'react-native-auto-height-image'，而非鸿蒙包名（由 RNOH harmony.alias 自动重定向）。

平台差异：

• 本库为纯 JS 组件（js-only），无需手动 Link（无需 C++/ETS Package 注册），npm install 后通过 harmony.alias 自动重定向 import。
• Image.resolveAssetSource、Image.getSize、Image.prefetch 均由 RNOH 框架实现，鸿蒙端可用。
• ImagePolyfill 的 Android 404 polyfill 在鸿蒙端不激活（Platform.OS === 'android' 不命中）；onError 经 Image.getSize 失败路径触发，行为正确。

权限要求：

• 加载远程图片需在 module.json5 声明 ohos.permission.INTERNET（system_grant，安装时自动授予）。

Link

如使用版本支持 Autolink 且工程已接入，可跳过手动配置。

{
  "overrides": {
    "@rnoh/react-native-openharmony": "./react_native_openharmony"
  }
}

"dependencies": {
  "@bingtang-rn/react-native-auto-height-image": "file:../../node_modules/@bingtang-rn/react-native-auto-height-image/harmony/auto_height_image.har"
}

set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")

add_subdirectory("${OH_MODULES}/@bingtang-rn/react-native-auto-height-image/src/main/cpp" ./auto_height_image)

target_link_libraries(rnoh_app PUBLIC auto_height_image)

#include "AutoHeightImagePackage.h"

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
        std::make_shared<AutoHeightImagePackage>(ctx),
    };
}

import { AutoHeightImagePackage } from '@bingtang-rn/react-native-auto-height-image/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new AutoHeightImagePackage(ctx),
  ];
}

属性 / API

平台差异

• ImagePolyfill（Android 404 prefetch polyfill）在鸿蒙端不激活；RNOH Image 的 onError 对远程图片失败（含 404）正常触发，onError 经 Image.getSize 失败路径到达回调，行为正确。
• 原库深路径 import react-native/Libraries/Image/resolveAssetSource 已改为公开 API Image.resolveAssetSource（RNOH 已实现，返回 { width, height, uri }）。
• RN 0.72+ 已移除 Image.propTypes，适配代码已移除相关 propTypes 声明（React 17+ 不再校验 propTypes，行为等价）。

使用限制

• 加载远程图片需声明 ohos.permission.INTERNET。
• source 为 number 时走 Image.resolveAssetSource（本地资源）；为 { uri } 时走 Image.getSize（远程图片）。

快速验证（运行 Example）

前置条件

运行步骤

1. 克隆仓库

git clone <仓库地址>
cd <仓库目录>

2. 安装依赖并构建

npm install --legacy-peer-deps
npm pack           # 生成 tgz 包（会自动触发 prepare 构建 JS 产物）

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

cd example
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 目录
• 等待 Sync 完成

6. 编译并运行 HAP

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

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

约束与限制

兼容性

• RNOH: 0.72+
• HarmonyOS SDK: API 17+
• DevEco Studio: 5.0+

遗留问题

无（或列出已知问题）

开源协议

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