前言

本次参加开源鸿蒙跨平台开发学习活动，选择了 React Native 开发 HarmonyOS技术栈，在学习的同时顺便整理成一份系列笔记，记录从环境到开发的全过程。本篇作为第五篇，重点介绍开发GitCode口袋工具APP的认证和接口联调阶段应该怎样调试和调测。

一、配置Metro实现代码热更新

ReactNative开发HarmonyOS应用我们之前都是先编译然后再复制产出物到HarmonyOS工程中，这样非常的耗时间而且也不能实时查看自己修改的效果，非常不友好。其实ReactNative在HarmonyOS也是可以和开发H5一样实时更新查看效果的。

那么我们就来实现最能显著提升开发效率的——热更新（Hot Reload）与调试能力。

React Native 的热更新本质仍然依赖 Metro 服务提供的 bundle。因此第一步是让鸿蒙侧能正确连接到 Metro。

1. 配置 Metro（JS 工程侧）

最关键的文件是 metro.config.js。在 HarmonyOS 下，需要扩展 RNOH 提供的配置：

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

module.exports = mergeConfig(
  getDefaultConfig(__dirname),
  createHarmonyMetroConfig({
    reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
  }),
  {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
  }
)

Harmony Metro 的配置逻辑和原生 RN 非常像，只是多了一层 createHarmonyMetroConfig 用来注入鸿蒙侧的处理逻辑。

二、在 HarmonyOS 里启用热更新

1. 使用 RNApp（最简方式）

如果工程使用了 RNApp.ets，只要将 Metro 的 provider 传入即可：

RNApp({
  jsBundleProvider: new MetroJSBundleProvider(),
})

这种方式开箱即用，适合大多数场景。

2. 不使用 RNApp：自行管理 RNInstance

如果是自行创建 RNInstance，那么需要在实例上手动加载 bundle：

rnInstance.runJSBundle(new MetroJSBundleProvider())

本质上只是将 Metro 输出的 bundle 重新加载到 RN 引擎中。

3. 热更新触发点

只要 Metro 服务启动成功，以下几种情况都会触发页面刷新：

• 保存任意 JS 文件

• 在命令行输入 r

• 设备上打开 Dev Menu → Reload

这些行为与传统 RN 基本一致。

三、让手机能访问 Metro：三种连接方式

HarmonyOS 真机默认无法直接访问你电脑上的 Metro，需要按下面方式之一进行连接：

方式一：USB + 端口转发（最稳）

hdc rport tcp:8081 tcp:8081
npm run start

这是调试阶段最常用的方法，简单直接。

方式二：局域网直连（无线热更新）

如果真机和电脑在同一个 Wi-Fi，可以写成：

MetroJSBundleProvider.fromServerIp('192.168.xx.xx', 8081)

无需数据线，也不需要端口转发。

方式三：在手机端手动指定 Metro 服务器

摇一摇 → Dev Menu → Settings → Debug Server host & port for device

输入：

192.168.xx.xx:8081

即可完成无线调试。

（如果摇一摇没反应，需要额外申请加速度计权限）。

需要在module.json5内配置权限

"requestPermissions": [
    {
        "name": "ohos.permission.ACCELEROMETER"
    }
],

四、React Native 调试工具在 HarmonyOS 上怎么用？

Metro 热更新只是第一步，真正开发中你肯定还需要调试 JS，这部分 RNOH 也大多保留了原生 RN 的能力。

1. 打开 Dev Menu

调试入口完全一致：

hdc rport tcp:8081 tcp:8081
npm run start
# 在 Metro 命令行输入 “d”

手机上会弹出 Dev Menu。

2. Element Inspector

用于查看组件布局、层级、样式，和传统 RN 一样可用。
操作方式也完全一致：Dev Menu → Toggle Element Inspector。

3. React DevTools

使用方式和原生无差别：

npx react-devtools
hdc rport tcp:8097 tcp:8097

然后通过 Dev Menu 打开即可接入 DevTools 面板。

4. 断点调试

RNOH 支持：

• Flipper（推荐）

• Chrome DevTools

Flipper 启动后可直接看到 React Debugger，能像 iOS/Android 一样断点、查看调用栈、查变量。

Chrome 调试方式同 RN：

chrome://inspect

配置端口后就能看到 Hermes 运行时并进行断点定位。

五、捕获错误：LogBox & RNOH Error 监听

HarmonyOS 端的 LogBox 与 RN 一致，错误时会自动弹窗。
如果你用 Metro，可以直接点击调用栈跳到 VSCode 对应文件，非常方便。

此外，RNOH 提供原生错误监听：

AppStorage.get<RNOHCoreContext>('RNOHCoreContext')!
  .subscribeToRNOHErrors(err => {
    console.log(err.getMessage())
  })

这在关闭 dev、打 product bundle 时尤其有用，可捕获更早期的崩溃信息。

总结

整体来看，React Native 在 HarmonyOS 上的热更新与调试体验非常接近 Android/iOS。
Metro、Dev Menu、React DevTools、Flipper…常见的工具都能顺畅运行。

RNOH 在 Metro provider、DevTools 接入、错误捕获上做了硬件适配，但我们的使用方式基本不变。

只要你的 Metro 启动成功、设备能连通，就能像在 Android 一样享受完整的热更新链路。

好了，这样我们就能很顺利方便的用ReactNative开发HarmonyOS应用了。