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鸿蒙开发的第一步，接下来可以开始编写你的第一个跨平台应用了！