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

一、技术选型：为什么选React Native？

1. 在开源鸿蒙跨平台开发中，最终选定React Native（RN） 作为核心技术栈，核心考量围绕开发效率、跨端兼容性、技术成熟度三大维度，完全贴合开源项目的开发需求：

2. 极致跨端能力：一套代码可兼容 iOS、Android、开源鸿蒙多终端，大幅降低鸿蒙生态的开发成本，契合开源项目 “低成本复用” 的核心诉求；
3. 技术生态成熟：基于成熟的 JavaScript 语法体系，开发者学习成本低，且拥有丰富的第三方库支持，能快速补齐鸿蒙端开发的功能短板；
4. 性能贴近原生：通过 JS 桥接原生组件，兼顾开发效率与应用运行性能，满足美食 APP 这类轻量级应用的交互需求；
5. 鸿蒙官方适配：RN for OpenHarmony（RNOH）插件已完成官方适配，打通了 RN 与鸿蒙原生的开发链路，降低了开源项目的适配门槛。

二、RN适配开源鸿蒙的环境搭建过程

本次环境搭建的核心目标是：完成 Node.js、RN 基础环境、DevEco Studio 工具、RNOH 适配插件的全流程配置，最终实现本地模拟器可稳定运行 RN 鸿蒙工程，为后续美食 APP 开发奠定基础。

前置依赖安装

1. 安装 Visual Studio Code：作为 RN 代码编写的核心编辑器，支持鸿蒙相关插件扩展；
2. 安装 Git：为后续代码提交、开源仓库协作提供版本控制支持；
3. 安装 DevEco Studio 5.0+：鸿蒙原生开发与工程编译的核心工具，需匹配 OpenHarmony 6.0 SDK（API 20）。

三、环境搭建

一、配置开发环境

1.配置hdc环境变量

hdc工具位于OpenHarmony SDK下的toolchains 目录下

2.添加到PATH环境变量

3.配置 HDC_SERVER_PORT 环境变量

4.配置 CAPI 版本环境变量

5.配置 npm 镜像源

1.strict-ssl=false
2.sslVerify=false
3.registry=https://repo.huaweicloud.com/repository/npm/

6.清理npm缓存

npm cache clean --force

7.验证配置环境！很重要 可以检查出前面是否做对了。

二、创建 React Native 工程

1.选择项目存储位置

2.创建 React Native 工程

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

3.确认安装

4.等待工程创建成功

三、创建鸿蒙工程

1.打开 DevEco Studio

然后根据步骤一步步来，最后的界面是这样的。

然后就是在模拟器上运行RNOH跨平台应用，这个我搞了很久，因为我的电脑是Win11家庭版，他不支持用Hyper-v，然后我找了很多教程都没有搞好。

四、模拟器调试：从踩坑到本地成功运行

这是本次环境搭建的核心难点，也是开源项目实操中最易遇到的问题，全程实现从报错到本地模拟器成功运行的完整闭环。

（一）核心报错：本地模拟器无法启动（Error Code: 00801001）

1. 报错场景
       首次尝试在本地鸿蒙模拟器运行工程时，DevEco Studio 提示未开启Hyper-V，且 Win11 家庭版无 Hyper-V 功能入口，尝试 WSL2 + 远程模拟器方案，仅能显示界面无法执行代码逻辑。
2. 根因分析

• Win11 家庭版默认屏蔽 Hyper-V 虚拟化技术，而鸿蒙本地模拟器依赖该技术实现硬件加速；
• WSL2 + 远程模拟器存在网络通信延迟，导致 RN JS Bundle 无法与鸿蒙原生端建立连接。

（二）解决方案：本地模拟器适配（Win11 家庭版专属）

通过手动开启虚拟化 + 安装鸿蒙兼容模拟器，最终实现本地稳定运行，步骤如下：

1. 开启硬件虚拟化：重启电脑进入 BIOS，找到「Intel Virtual Technology」（AMD 为 SVM），设置为「Enabled」；
2. 安装鸿蒙低版本兼容模拟器：选择 OpenHarmony 4.0（API 9）轻量级模拟器，降低对 Hyper-V 的依赖要求；
3. 重新关联模拟器与工程：在 DevEco Studio 的 Device Manager 中启动本地模拟器，确认设备状态为「Online」；
4. 重新编译运行工程：在 RN 工程目录启动 Metro 服务，在鸿蒙工程执行「Run 'entry'」。

（三）最终验证：本地模拟器运行成功

1. Metro 服务正常启动：命令行输出「Metro is running on port 8081」；
2. 工程编译无报错：DevEco Studio 输出「BUILD SUCCESS」，耗时 1 分 52 秒；
3. 本地模拟器显示 RN 界面：鸿蒙模拟器成功加载「Welcome to React Native」核心页面，可正常响应界面交互，日志无任何报错。

最后会把运行结果显示出来

五、总结

    本次完成了 React Native 适配开源鸿蒙的全流程环境搭建，从技术选型、环境配置到模拟器调试，实现了“本地开发 + 本地调试”的完整闭环，核心收获如下：

1. 技术层面：掌握了 RN 与鸿蒙的适配核心、环境变量配置技巧，解决了 Win11 家庭版模拟器运行的核心痛点，实现了本地模拟器稳定运行 RN 鸿蒙工程；
2. 开源层面：理解了开源项目 “环境可复现、文档规范化” 的重要性，为后续美食 APP 的开源开发、仓库协作奠定了基础；
3. 问题解决层面：积累了 “报错定位→根因分析→多方案尝试→最终闭环” 的开源开发问题解决思路，这是参与鸿蒙开源生态建设的核心能力。

后续将基于本次搭建的环境，开展美食 APP 的组件封装、交互开发工作，持续践行开源鸿蒙跨平台开发的实践之路。