📅 发布时间：2026/6/19 8:53:53

React Native鸿蒙开发实战(一)：环境搭建与第一个应用

一、开发环境准备

在开始React Native鸿蒙开发之前，需要先配置好基础开发环境。以下是必需的软件和工具：

1.1 核心工具安装

Node.js：推荐使用Node.js 18+ LTS版本，需支持ES2020+语法

# 验证Node.js版本
node -v
npm -v

JDK：必须使用JDK 11，需要配置JAVA_HOME环境变量

# 验证JDK版本
java -version

DevEco Studio：华为官方推出的集成开发环境，专门针对鸿蒙应用开发

下载地址：https://developer.huawei.com/consumer/cn/deveco-studio/
安装时勾选HarmonyOS SDK

1.2 环境变量配置

在终端配置文件（.zshrc或.bashrc）中添加鸿蒙工具链路径：

export PATH="/Applications/DevEco-Studio.app/Contents/sdk/default/openharmony/toolchains:$PATH"
export HDC_SERVER_PORT=7035

二、创建第一个React Native鸿蒙项目

2.1 项目初始化

使用React Native CLI创建新项目，推荐使用TypeScript模板以获得更好的类型安全性：

npx react-native@0.72.5 init MyHarmonyApp --template react-native-template-typescript

注意：目前React Native for OpenHarmony仅支持0.72.5版本

2.2 安装鸿蒙依赖

进入项目目录，安装鸿蒙专用库：

cd MyHarmonyApp
npm install @react-native-oh/react-native-harmony

2.3 配置Metro支持

修改项目的metro.config.js文件，启用鸿蒙支持：

const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig());

三、项目结构解析

创建完成后，项目目录结构如下：

MyHarmonyApp/
├── harmony/              # 鸿蒙平台代码
│   ├── entry/           # 应用入口
│   └── src/main/        # 主代码目录
├── android/             # Android平台代码
├── ios/                 # iOS平台代码
├── App.tsx              # React Native应用入口
├── package.json         # 项目依赖配置
└── metro.config.js      # Metro打包配置

四、运行第一个应用

4.1 启动Metro服务

在项目根目录执行：

npm start

4.2 运行到鸿蒙设备

打开DevEco Studio，导入项目中的harmony目录，然后连接真机或启动模拟器，点击运行按钮即可

真机调试：通过hdc命令连接真机：

hdc shell setprop persist.debug.hdc.enable 1
hdc forward tcp:8081 tcp:8081

五、常见问题解决

5.1 环境验证

使用以下命令验证环境配置是否正确：

npx react-native-harmony-cli doctor

5.2 权限申请

在module.json5中声明所需权限：

{"module": {"requestPermissions": [{"name": "ohos.permission.CAMERA","reason": "需要相机权限进行拍照功能"}]}
}

六、总结

通过本篇文章，你已经成功搭建了React Native鸿蒙开发环境，创建了第一个跨平台应用，并了解了项目的基本结构和运行方式。下一篇文章将深入讲解React Native基础组件在鸿蒙平台上的使用和适配技巧。

关键要点回顾：

必须使用Node.js 18+和JDK 11
React Native仅支持0.72.5版本
需要安装@react-native-oh/react-native-harmony库
需配置Metro支持鸿蒙平台
真机调试通过hdc工具进行

现在你已经迈出了React Native鸿蒙开发的第一步，接下来可以开始编写你的第一个跨平台应用了！

React Native鸿蒙开发实战(一)：环境搭建与第一个应用 - 青青子衿-