HarmonyOS鸿蒙Next中项目引入@react-native-oh-tpl/react-native-blob-util后通过codegen报错

HarmonyOS鸿蒙Next中项目引入[[@react-native-oh](/user/react-native-oh)-tpl](/user/react-native-oh-tpl)/react-native-blob-util后通过codegen报错

版本信息：

```json
"react": "^18.2.0",
"react-native": "0.72.5",
"[[[@react-native](/user/react-native)-oh](/user/react-native-oh)-tpl](/user/react-native-oh-tpl)/react-native-blob-util": "^0.19.6-0.0.17-rc.1",
"[[@react-native](/user/react-native)-oh](/user/react-native-oh)/react-native-harmony": "^0.72.70",
"[@react-native](/user/react-native)/metro-config": "0.72.11",

操作：


在引入"[[[@react-native](/user/react-native)-oh](/user/react-native-oh)-tpl](/user/react-native-oh-tpl)/react-native-blob-util": "^0.19.6-0.0.17-rc.1"后，执行"codegen": "react-native codegen-harmony --cpp-output-path ./harmony/entry/src/main/cpp/generated --rnoh-module-path ./harmony/entry/oh_modules/[@rnoh](/user/rnoh)/react-native-openharmony"后，产出了如下文件

![cke_5264.png]

然后我把react-native-openharmony > generated 文件夹粘贴到：


![cke_12301.png]


把cpp > generated 文件夹粘贴到：

![cke_17418.png]

并按照 https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/codegen.md 修改了 CMakeLists.txt 和 PackageProvider.cpp 文件。



最终运行app提示：

![cke_30830.png]

找了多个文档都没有详细说明，卡了一天了。求大佬解答！！


更多关于HarmonyOS鸿蒙Next中项目引入@react-native-oh-tpl/react-native-blob-util后通过codegen报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

【背景知识】

React Native 是一个基于 JavaScript 和 React 框架的开源框架，用于构建原生移动应用程序。它允许开发者使用 React 的组件模型和声明式编程风格来构建跨平台的移动应用。

主要特点和详细介绍：

  • 跨平台性：开发者只需要编写一次代码，就可以在 iOS、Android、React Native DOM 等不同平台上运行应用程序，从而提高了开发效率和代码复用率。
  • 基于 React：React Native 基于 React 框架，采用了 React 的组件模型和虚拟 DOM 技术。
  • 原生性能：React Native 应用程序的业务逻辑是使用 JavaScript 编写的，但它可以调用原生平台提供的 API 和使用原生 UI 组件。这使得 React Native 应用程序可以实现接近原生应用的性能和用户体验，包括流畅的滚动、快速的响应时间。
  • 热更新：React Native 支持热更新，整个应用程序可以不经过重新编译直接将更新后的 JavaScript 代码推送到设备上。
  • 灵活性和可扩展性：具有很高的灵活性和可扩展性，开发者可以根据自己的需求选择合适的第三方库和工具，来扩展和增强应用程序的功能。

关于 React Native 更详细的介绍，请参考React Native 中文网。

【解决方案】

该报错为RN侧工程使用了某库，HarmonyOS侧工程却没有引入该库导致。可查阅RN三方库适配总览，搜索库名找到三方库具体使用教程，在ArkTs 侧引入该库后即可编译通过。

打开 entry/src/main/ets/RNPackagesFactory.ts，添加：

import {BlobUtilPackage} from '@react-native-oh-tpl/react-native-blob-util/ts';

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

更多关于HarmonyOS鸿蒙Next中项目引入@react-native-oh-tpl/react-native-blob-util后通过codegen报错的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在工程根目录的 exampleApp/harmony/oh-package.json5 添加 RN SDK 依赖和 overrides 字段：

{
  ...
  "dependencies": {
    "@rnoh/react-native-openharmony": "0.72.70"
  },
  "overrides": {
    "@rnoh/react-native-openharmony": "0.72.70"  // 请按需选择版本
  }
}

再结合你的方式，解决了我的问题，谢谢！！，

https://developer.huawei.com/consumer/cn/blog/topic/03169292089068014 这个你可以参考一下？看看行不

尊敬的开发者，您好！您的问题已受理，请您耐心等待，感谢您的理解与支持！

在HarmonyOS鸿蒙Next中引入@react-native-oh-tpl/react-native-blob-util后codegen报错，可能是以下原因：

  1. 依赖版本冲突
  2. 三方库未适配ArkTS
  3. codegen配置文件错误

检查点：

  • 确保库版本与鸿蒙Next兼容
  • 确认库是否支持ArkTS规范
  • 检查native_modules.json配置是否正确

典型错误通常出现在库的Native模块与ArkTS接口不匹配时。

从错误日志来看，主要问题是找不到react-native-blob-util模块的Native实现。这个问题通常是由于Codegen生成的代码没有正确集成到项目中导致的。以下是几个关键检查点：

  1. 确保CMakeLists.txt中正确添加了生成的cpp文件路径：
# 在add_library部分添加
add_library(rnoh_app SHARED
    ...
    ${CMAKE_CURRENT_SOURCE_DIR}/generated/cpp/react-native-blob-util.cpp
)
  1. 检查PackageProvider.cpp是否正确定义了模块：
#include "react-native-blob-util.h"

...
auto package = react::RNOHPackageBuilder(jsModules)
    ...
    .addModuleProvider("RNFetchBlob", &react::RNOH_facebook::react::RNFetchBlobProvider)
    ...
  1. 确认文件路径是否正确：
  • 生成的react-native-blob-util.h/.cpp文件应该放在src/main/cpp/generated目录
  • JS端的代码生成文件应该在oh_modules/@rnoh/react-native-openharmony/generated
  1. 检查依赖版本是否匹配：
  • @react-native-oh-tpl/react-native-blob-util的版本需要与Codegen工具版本兼容
  • 可以尝试更新到最新稳定版本

如果问题仍然存在，建议检查：

  1. 重新运行Codegen命令后是否生成完整文件
  2. 清理并重新构建项目
  3. 确认模块名称在JS和Native端是否完全一致（注意大小写）

错误日志显示系统正在寻找RNFetchBlob模块但未找到，这表明Native模块注册可能存在问题。

回到顶部