从零学习RN for OpenHarmony踩坑日记（二）

上个文章中我们已经准备好了react-nativ和OpenHarmony的开发环境，现在正式开始进行我们第一个项目的开发。

gaojw07

496人浏览 · 2026-01-23 14:51:07

gaojw07 · 2026-01-23 14:51:07 发布

上个文章中我们已经准备好了react-nativ和OpenHarmony的开发环境，现在正式开始进行我们第一个项目的开发。

创建React Native工程

选择一个目录作为workspace，按照React Native 的入门教程，使用 React Native 内置的命令行工具来创建一个名为 “AwesomeProject” 的新项目。这个命令行工具不需要安装，可以直接用 node 自带的 npx 命令来创建，目前 React Native for OpenHarmony 仅支持 0.72.5 版本的 React Native：

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

错误1：

npx : 无法加载文件 D:\soft\developMent\nodejs\npx.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.micro soft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

问题原因：

Windows 系统的 PowerShell 执行策略限制了脚本的运行，导致无法正常执行 npx 命令

解决方案：

1、以管理员身份打开 PowerShell

2、查看当前执行策略

在管理员模式的 PowerShell 中输入以下命令并回车：

Get-ExecutionPolicy

输出是 Restricted（受限），这就是问题的根源。

3、修改执行策略

执行以下命令：

Set-ExecutionPolicy RemoteSigned

经过上诉三步后，关闭当前powershell窗口，重新打开一个，即可解决此问题。

错误2：

我执行了React Native官方文档初始化命令：

npx @react-native-community/cli init AwesomeProject

出现错误。错误信息 npm warn Unknown user config "sslVerify". This will stop working in the next major version of npm. error Invalid Version: latest. TypeError: Invalid Version: latest

错误原因：

这个错误主要包含两部分：一是 npm 警告 Unknown user config "sslVerify"（未知的用户配置项），二是核心错误 Invalid Version: latest（无效的版本号：latest），本质是我在执行 npm 命令时使用了不合法的版本号格式，同时还有一个即将废弃的配置项警告。

解决方法：

1、查看当前配置，确认是否有 `sslVerify`

 npm config get sslVerify

2、删除这个无效配置：

npm config delete sslVerify

3、指定React Native版本号

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

经过上述处理，初始化react-native项目成功。

引入鸿蒙化依赖

1、引入依赖

打开 AwesomeProject 目录下的 package.json，在 scripts 下新增 OpenHarmony 的依赖："dev": "react-native bundle-harmony --dev"。

{
 "name": "AwesomeProject",
 "version": "0.0.1",
 "private": true,
 "scripts": {
   "android": "react-native run-android",
   "ios": "react-native run-ios",
   "lint": "eslint .",
   "start": "react-native start",
   "test": "jest",
   "dev": "react-native bundle-harmony --dev"
 },
 "dependencies": {
   "react": "18.2.0",
   "react-native": "0.72.5"
 },
 "devDependencies": {
   "@babel/core": "^7.20.0",
   "@babel/preset-env": "^7.20.0",
   "@babel/runtime": "^7.20.0",
   "@react-native/eslint-config": "^0.72.2",
   "@react-native/metro-config": "^0.72.11",
   "@tsconfig/react-native": "^3.0.0",
   "@types/react": "^18.0.24",
   "@types/react-test-renderer": "^18.0.0",
   "babel-jest": "^29.2.1",
   "eslint": "^8.19.0",
   "jest": "^29.2.1",
   "metro-react-native-babel-preset": "0.76.8",
   "prettier": "^2.4.1",
   "react-test-renderer": "18.2.0",
   "typescript": "4.8.4"
 },
 "engines": {
   "node": ">=20"
 }
}

2、安装依赖

在 AwesomeProject 目录下运行安装依赖包命令

npm i @react-native-oh/react-native-harmony

错误1：

错误信息 PS D:\soft\developMent\Android\workspace\AwesomeProject>

npm i @react-native-oh/react-native-harmony npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: AwesomeProject@0.0.1 npm error Found: react-native@0.72.5 npm error node_modules/react-native npm error react-native@"0.72.5" from the root project npm error npm error Could not resolve dependency: npm error peer react-native@"0.77.1" from @react-native-oh/react-native-harmony@0.77.44 npm error node_modules/@react-native-oh/react-native-harmony npm error @react-native-oh/react-native-harmony@"*" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution.

错误原因：

npm 依赖版本冲突：由于RNOH官方文档没有及时更新，目前@react-native-oh/react-native-harmony最新版本是0.77.44。但是我跟着官方文档指导建立的React Native项目使用的版本是0.72.5，版本不匹配导致 npm 无法解析依赖树。

解决方案：

前往官网查看鸿蒙最新支持的版本信息，找到支持React Native的切发布了npm仓库的最新版本0.72.101-5，安装此版本。

npm install @react-native-oh/react-native-harmony@0.72.101-5

运行指令并生成bundle

1、修改配置文件

打开 AwsomeProject\metro.config.js，并添加 OpenHarmony 的适配代码。配置文件的详细介绍，可以参考React Native 中文网。修改完成后的文件内容如下：

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

/**
* @type {import("metro-config").ConfigT}
*/
const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

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

2、执行命令

在 AwesomeProject 目录下运行生成 bundle 文件的命令。运行成功后，会在 AwesomeProject/harmony/entry/src/main/resources/rawfile 目录下生成 bundle.harmony.js 和 assets 文件夹，assets 用来存放图片（如果 bundle 中不涉及本地图片，则没有 assets 文件夹）。