一、什么是 React Native for OpenHarmony？

React Native 是 Facebook（Meta）开发的跨平台移动应用开发框架，可以用 JavaScript 和 React 开发原生应用。

React Native for OpenHarmony 是 React Native 针对 OpenHarmony/HarmonyOS 系统的适配版本，让你可以用 React Native 开发 HarmonyOS 应用
 那么就有人问主播： 主播主播 为什么要选择RN呢？  那么这里将不得分提到他的优势

1、使用一套代码，多平台运行（Android、iOS、HarmonyOS） 所以根本不存在什么更换设备后代码还要从头来的苦恼

2、使用熟悉的 React 和 JavaScript 技术栈 

3、接近原生应用的性能

4、热重载，快速开发调试

二、搭建环境之前，需要准备的软件

主播用的设备详情如下：（主播设备一般 不喜勿喷 仅供学习）

• 💻 设备规格：
  • 处理器：Intel(R) Core(TM) i5-1035G4 CPU @ 1.10GHz   1.50 GHz
  • 内存：16.0 GB
  • 系统类型：64 位操作系统, 基于 x64 的处理器
• 🪟 Windows规格：
  • 版本：Windows 11 专业版
  • 版本号：23H2

安装前准备 

Visual Studio Code(安装网址如下：https://code.visualstudio.com）

下载时直接点击download for window即可

新手的话直接库库点击同意、下一步、同意、下一步........

大佬的话按照积极的习惯就好

Git（安装网址如下：https://git-scm.com/）

新手同上 注意只需要点击Install for window即可 

        下载好后依旧库库同意 下一步 同意 下一步 巴拉巴拉.....

大佬自便

DevEco Studio（安装网址如下：华为开发者联盟-HarmonyOS开发者官网，共建鸿蒙生态）

在这里比较麻烦   记得先创建华为开发者联盟账号（需要实名认证）

💡 小提示 如果下的较慢可以先刷刷抖音哈

下载好后依旧库库同意 下一步 同意 下一步 巴拉巴拉.....

点击页面顶部菜单栏的 “开发” → “下载” → “所有工具” → “DevEco Studio” 进入下载页面
 根据你的操作系统切换选项卡（Windows/Mac x86/Mac ARM），找到 Windows 版本
 点击页面上的 DevEco Studio for Windows 6.0.1.251(2.6GB) 链接开始下载

（主播用的是这个版本 大佬觉得这个版本不好用可以用自己喜欢的哈）
1.打开设置页面：

打开SDK设置页面、并设置存储途径

一般默认的途径是c盘，如果c盘内存不够的，就选择别的盘

选择好后，点next下载等待，然后查看SDK配置。
然后等到下载完成后，我们回到鸿蒙SDK设置的页面，选择以下选项：

检查开发环境：
返回初始页面

• 已完成所有前置软件的安装（Visual Studio Code）
• 已注册并实名认证华为开发者账号（用于签名和模拟器）
• 网络连接正常（需要下载大量依赖包）
• 至少 5 GB 可用磁盘空间
•  管理员权限（配置环境变量需要）

三、配置HarmonyOS SDK和环境变量

打开系统属性

按 Win + I 打开设置

搜索 “高级系统设置”

点击打开系统属性面板

打开环境变量设置
 在系统属性面板中，点击 “环境变量（N）…” 按钮
打开环境变量设置界面

配置 TOOL_HOME 变量:
TOOL_HOME 指向 DevEco Studio 的安装目录，这是其他环境变量的基础。

在 “系统变量” 区域，点击 “新建（W）…” 按钮

填写变量信息：

变量名（N）：TOOL_HOME
变量值（V）：DevEco Studio 的实际安装路径
如何找到 DevEco Studio 安装路径？

默认路径通常是：C:\Users\你的用户名\AppData\Local\Huawei\DevEco Studio
或者在文件资源管理器中找到 DevEco Studio 的安装文件夹
复制完整路径，注意路径中不要有多余的空格
示例：C:\Tools\Huawei\DevEco Studio 或 C:\Users\张三\AppData\Local\Huawei\DevEco Studio

点击 “确定” 按钮保存

注意：路径中如果包含空格（如 DevEco Studio），确保完整复制，不要修改。

配置 DEVECO_SDK_HOME 变量:
DEVECO_SDK_HOME 指向 SDK 的存储目录，通常位于 DevEco Studio 安装目录下的 sdk 文件夹。

 在 “系统变量” 区域，点击 “新建（W）…” 按钮

填写变量信息：

变量名（N）：DEVECO_SDK_HOME
变量值（V）：%TOOL_HOME%\sdk

点击 “确定” 按钮保存

配置 PATH 变量:
PATH 变量告诉系统在哪里查找可执行文件。我们需要添加 DevEco Studio 的工具路径。

在 “系统变量” 区域，找到 “Path” 变量名

点击 “编辑（I）…” 按钮，打开编辑环境变量窗口

点击 “新建” 按钮，依次添加以下三个路径（分别添加，每次点击新建）：

%TOOL_HOME%\tools\ohpm\bin - OpenHarmony 包管理器
%TOOL_HOME%\tools\hvigor\bin - 构建工具
%TOOL_HOME%\tools\node - Node.js 运行时
最后点击 “确定” 按钮保存

配置 hdc 环境变量
hdc（HarmonyOS Device Connector）是 OpenHarmony 提供的命令行调试工具，用于连接真机进行调试。

找到 hdc 工具路径
hdc 工具位于 OpenHarmony SDK 的 toolchains 目录下，路径格式为：

{DevEco Studio安装路径}/sdk/{SDK版本}/openharmony/toolchains
AI写代码
1
如何找到这个路径？

打开 DevEco Studio
“File” → “Settings” → “OpenHarmony SDK”
查看 SDK Location，然后找到 openharmony/toolchains 目录
示例路径：

C:\Users\你的用户名\AppData\Local\Huawei\Sdk\default\openharmony\toolchains
D:\Tools\Huawei\Sdk\default\openharmony\toolchains
添加到 PATH 环境变量
 右键点击 “开始” 按钮（或按 Win + X）
点击 “系统” → “高级系统设置” → “环境变量”
在 “系统变量” 区域，找到 “Path” 变量
点击 “编辑”，添加 hdc 工具的完整路径

配置 HDC_SERVER_PORT 环境变量：
hdc 需要一个端口来连接设备，我们需要配置端口号。

 在 “系统变量” 区域，点击 “新建” 按钮

填写变量信息：

变量名：HDC_SERVER_PORT
变量值：7035（或任意未被占用的端口号）
 点击 “确定” 保存

配置 CAPI 版本环境变量：
当前 React Native for OpenHarmony 框架默认使用 CAPI（Component API）架构，需要配置环境变量来启用。

在 “系统变量” 区域，点击 “新建” 按钮

1. 填写变量信息：

   • 变量名：RNOH_C_API_ARCH
   • 变量值：1

2. 点击 “确定” 保存

四、创建鸿蒙工程

打开DevEco Studio

在欢迎界面，点击Create Project 打开工程创建向导

在这里选择第一个Empty Ability 随后直接next

 填写工程配置信息：

工程名称：可以保持默认或自定义
工程包名：保持默认即可
工程存储位置：选择 React Native 工程根目录，并设置子目录名称为 harmony
最低兼容SDK版本：选择 API 20 或更高版本
模块名称：保持默认即可
设备类型：选择 Phone（手机）
要注意：工程存储位置必须设置为：{React Native工程根目录}/harmony

检查配置信息无误后  点击Finish按钮 最后就是这个样子了