一、前言

本文按照软硬件环境准备、ReactNative开发环境搭建、OpenHarmony开发环境搭建和RNOH工程配置以及运行结果示例的逻辑线依次讲述React Native For OpenHarmony跨平台开发技术实战过程。在讲解过程中参考了博客 https://blog.csdn.net/zl392321162/article/details/156641198 中的步骤,所以博客中提到的步骤不会再进行赘述,但是会对操作中踩到的坑进行重点记录,有些不明确是哪些操作或者操作组合引起的,会如实记录完整操作过程。
环境搭建流程

二、软硬件平台环境

1. 硬件环境

硬件环境

2. 软件环境

软件环境

三、开发工具和版本

1. 核心包软件版本

开发工具和版本

2. 开发工具版本

工具名称 工具版本
DevEco DevEco Studio 6.0.2 Release Build Version: 6.0.2.640, built on January 19, 2026
OpenHarmony SDK API Version 20(6.0.0.47)
React Native 0.72.5
react-native-harmony 0.72.90
Ninja 1.13.2

3. 环境变量配置

在这里插入图片描述

4. 环境搭建参考链接

开发环境搭建完整指南
DevEco Studio环境搭建完整指南

四、踩坑记录和解决方案

1. 文件路径长度问题

文件路径长度错误
遇到这个问题不用怀疑自己的工程放置的位置是不是太深导致,root cause是oh_modules依赖库的路径太深的原因,所以必须解决长路径问题,解决方式包括2个关键点,第一个关键点是让系统支持长路径,这个可以通过配置windows系统的注册表解决,第二个关键点是更新ninja版本,目前IDE自带的Ninja版本是1.12.0,通过将Ninja版本更新到1.13.2后问题才能解决。

1.1 修改Ninja版本

原Ninja版本
原始Ninja版本
修改后的Ninja版本
修改后的Ninja版本
Ninja 1.13.2下载链接
下载后将Ninja放到DecEco的默认sdk目录和自己设置的sdk目录中

C:\Program Files\Huawei\DevEco Studio\sdk\default\openharmony\native\build-tools\cmake\bin
D:\dev_tools\harmony\sdk\20\native\build-tools\cmake\bin

1.2 修改注册表支持长路径

在这里插入图片描述
注意注册表修改后一定要重启

2. 未定义符号问题

在这里插入图片描述

 undefined symbol: rnoh::PackageProvider::getPackages(rnoh::Package::Context)

这个问题是没有忠实原文链接的步骤导致,解决方法就是分析原因然后修改CMakeLists.txt文件解决

add_library(rnoh_app SHARED
    "./PackageProvider.cpp"
    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)

五、源码链接

1. 源码链接

源码链接

2. 运行示例

在这里插入图片描述

六、结束语

欢迎加入开源鸿蒙跨平台社区
https://openharmonycrossplatform.csdn.net

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐