学习背景

大家好！我是一名大二计科专业学生，之前只学过Java基础。最近对跨平台开发产生兴趣，在对比了React Native和Flutter后，选择了RN（因为有JavaScript基础感觉更友好）。偶然发现React Native可以支持鸿蒙了，于是决定挑战一下这个技术组合。

环境准备

系统环境

操作系统：Windows 11

开发工具：DevEco Studio 6.0.1 + Node.js 20.19.6

技术栈选择

React Native 0.72.5（仅支持此版本）

HarmonyOS API 9

开发语言：JavaScript/TypeScript + ArkTS

完整搭建流程

第一阶段：基础环境配置（3小时）

1. Node.js安装

踩坑点：版本兼容性

RN 0.72.5推荐Node.js 18.x/20.x

避免使用最新版v24（兼容性问题）

安装时必须勾选"Add to PATH"

2. DevEco Studio安装

从华为开发者官网下载

首次启动会自动下载SDK（较慢，建议耐心等待）

需要配置HDC调试工具环境变量

3.环境变量配置

4. npm镜像配置

npm config set registry https://repo.huaweicloud.com/repository/npm/

npm config set strict-ssl false

第二阶段：React Native项目创建（2小时）

1. 初始化项目

npx react-native@0.72.5 init MyFirstHarmonyApp --version 0.72.5

注意事项：

必须指定版本号0.72.5

过程较慢（10-15分钟），需要耐心等待

会出现很多npm warn deprecated警告，属于正常现象

2. 安装鸿蒙适配包

npm install @react-native-oh/react-native-harmony@0.72.86

3. 遇到的兼容性问题

在生成bundle时遇到模块兼容错误：

error Unable to resolve module ./Libraries/Components/DrawerAndroid/DrawerLayoutAndroid

解决方案：创建自定义metro配置

// metro-harmony.config.js

module.exports = {

resolver: {

// 重定向不兼容模块

resolveRequest: (context, moduleName, platform) => {

if (platform === 'harmony' && moduleName.includes('DrawerLayoutAndroid')) {

return {

filePath: require.resolve('./empty-module.js'),

type: 'sourceFile'

};

}

return context.resolveRequest(context, moduleName, platform);

}

}

};

第三阶段：鸿蒙项目创建与集成（4小时）

1. 创建鸿蒙项目

使用DevEco Studio创建Empty Ability项目

项目名称：MyHarmonyRNApp

确保存储路径在空间充足的磁盘

2. 安装RNOH依赖

cd entry

ohpm install @rnoh/react-native-openharmony@0.72.86

3. 配置C++层

创建CMakeLists.txt：

add_library(rnoh_app SHARED

"./PackageProvider.cpp"

"${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"

)

target_link_libraries(rnoh_app PUBLIC rnoh)

创建PackageProvider.cpp：

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {

return {};

}

4. 配置ArkTS层

修改EntryAbility.ets：继承RNAbility

创建RNPackagesFactory.ets：RN包工厂

修改Index.ets：集成RNApp组件

5. 配置构建文件

在entry/build-profile.json5中添加：

"externalNativeOptions": {

"path": "./src/main/cpp/CMakeLists.txt",

"arguments": "",

"cppFlags": ""

}

第四阶段：模拟器配置（2小时）

1. 磁盘空间问题

问题：C盘空间不足，需要至少10GB

解决方案：

1. 修改模拟器存储路径到E盘
2. 设置环境变量DEVECO_EMULATOR_HOME=E:\HarmonyEmulator
3. 在设备管理器中修改路径设置

2. 创建模拟器

设备类型：Phone

型号：Mate 70 Pro

内存：6GB（推荐）

存储：8GB（推荐）

系统镜像：HarmonyOS 6.0.1(21)

最终成果

1. 完整的开发环境搭建
2. React Native项目创建
3. 鸿蒙项目创建和配置
4. RN与鸿蒙的代码集成
5. 模拟器创建和运行
6. 项目成功构建

学习收获

技术层面

1. 理解了跨平台开发的架构原理：RN代码 → JS bundle → 鸿蒙原生渲染
2. 掌握了环境配置的关键细节：版本匹配、路径配置、网络问题处理
3. 学会了问题排查方法：从错误信息定位根本原因

经验层面

1. 耐心是关键：环境搭建过程漫长，需要保持耐心
2. 文档要仔细阅读：很多问题在官方文档中有提示
3. 社区资源很重要：CSDN、Stack Overflow等平台能提供很多解决方案

心态层面

1. 接受失败是常态：编程就是不断试错的过程
2. 拆分复杂问题：大问题分解为小步骤逐个解决
3. 保持学习热情：每个错误都是学习的机会

避坑

1. 版本严格匹配：RN 0.72.5 + 对应鸿蒙适配包
2. 路径避免中文：所有路径使用英文
3. 空间提前规划：确保磁盘有足够空间
4. 网络做好准备：下载过程需要稳定网络