如何在原生鸿蒙中进行RN热加载

一、背景

在上一篇博客中，我分享了将RN的bundle包在原生鸿蒙开发中进行使用。但是如果我们在实际的开发过程中，每次修改完代码都需要打包，然后重新运行原生项目的话效率就有点太低了。

原生鸿蒙支持RN的热加载，每次改完代码直接ctrl+s即可，改动后的代码会自动同步到手机上。除此之外，还支持同时调试RN多个项目。今天我想给大家分享一下，如何在鸿蒙中实现RN的热加载，以及分享其中的问题。

在原生加载端推荐大家使用RNAPP的方式，因为这会让热加载的配置更加简单，具体原因请见下文分享内容。

二、搭建Metro热加载环境

1、配置metro

在鸿蒙原生中，是使用metro来实现热加载功能的。所以我们在在项目的metro.config.js文件中配置harmony平台的Metro配置选项，将以下代码复制进入即可：

// metro.config.js
const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
const {
  createHarmonyMetroConfig,
} = require('react-native-harmony/metro.config');
/**
 * Metro配置
 * https://metrobundler.dev/docs/configuration
 *
 * @type {import("metro-config").ConfigT}
 */
const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true
      },
    }),
  },
};
module.exports = mergeConfig(
  getDefaultConfig(__dirname),
  createHarmonyMetroConfig({
    reactNativeHarmonyPackageName: 'react-native-harmony',
  }),
  config
);

2、创建一个新的，支持metro热加载的RNInstance。

如果你是使用RNAPP启动的RN框架，不需要特别的配置，因为RNAPP中已封装好相关环境。

如果你是使用的RNSurface，就需要创建一个RNComponentContext，并在context的devToolsController中增加如下的事件监听，并删除原有的RNInstance实例，重新启动一个新的RNInstance实例，即可启用热加载的功能：

this.ctx.devToolsController.eventEmitter.subscribe("RELOAD", async () => {
  this.cleanUp();
  ths.init();
})

3、原生代码中使用metro加载器

这一步也推荐大家使用RNAPP的方式进行Bundle的加载，具体操作可以看我上一篇的博客。

场景一、如果你是使用RNAPP启动的RN框架，则只需要将 new MetroJSBundleProvider() 传给 jsBundleProvider 属性即可：

RNApp({
  ...
  // 方式1
  // jsBundleProvider: new MetroJSBundleProvider()
  jsBundleProvider: new TraceJSBundleProviderDecorator(
    new AnyJSBundleProvider([
      // 方式2
      new MetroJSBundleProvider(),
    ]),
    this.rnohCoreContext.logger),
})

场景二、不使用 RNAPP 的话，需要开发者自己去创建并管理 RNInstance，假设你已经拥有了一个 RNInstance 的实例 rnInstance，加载Metro服务的方法可参考如下代码：

rnInstance.runJSBundle(new MetroJSBundleProvider())

4、启动一个RN远程服务端

和RN安卓端一样，调试的时候要先启动一个RN的远程服务端。这一步在官方文档里也有具体描述，需要打开命令行，执行npm start和rport命令：

我这边实测下来，要先hdc rport tcp:8081 tcp:8081，然后再npm run start，跟文档的顺序有些出入。不加run，直接npm start也可以。

问题一、一直等待，RN服务器同步bundle未成功

执行完命令后，你会发现一直停留在这个页面：

这里要等待个10秒左右，如果命令行没反应，回到命令行那里按几下回车，按完就能看到加载进度了。如果等了10秒按了回车还是不行，你要检查一下手机数据线是否松动了。如果手机的连接也没问题，那么就需要杀死手机上的APP，然后重启，重启后再等个5秒左右。如果还是没出现加载bundle的提示，继续杀死APP重启，多来几次。加载中的状态展示如下：

到这里就等着就可以了，大概5秒钟后，会出现以下提示，代表bundle同步成功：

问题二、报错了，说是端口监听失败

当你输入hdc rport命令的时候，报错说是端口监听失败：

这个问题非常常见，说明你之前已经运行过hdc rport了，所以8081端口已被占用。这里有2种解决方案，使用其他端口，或者是重启手机即可。

问题三、运行项目的时候报错，操作不允许？

具体报错堆栈为：operation not permitted

相信你看到这个报错肯定一头雾水，我第一次看到的时候雾水比你还大。出现的场景是在你启动了RN服务端以后，再去studio里面点运行以后。具体原因我猜测是目前该手机已经连上了调试，再去运行native项目冲突了。

这个问题我目前的解决方法是，把RN服务端关闭即可。这也意味着我们在RN调试的时候，不能同时调试原生那边的代码，二者只能一个一个来。如果有更好的解决方案，也欢迎大家来分享一下。

三、如何同时调试多个RN项目

1、在RN服务端使用多个不同的端口来区分

第一个项目使用hdc rport tcp:8081 tcp:8081，然后npm run start -- --port=8081

第二个项目使用hdc rport tcp:8082 tcp:8082，然后npm run start -- --port=8082

这里需要注意的是，npm run start的时候需要后面带上具体端口号，要不然就会报以下错误：

2、在鸿蒙原生端使用不同端口号进行对应

前面说过加载Bundle是使用的new MetroJSBundleProvider()的方式，我们可以点进去看下这个方式的具体代码实现：

也就是说如果你2个项目都使用这种方式进行加载的话，那么最终将同时指向8081端口，造成RN服务器错乱的现象，具体的现象可能是这样子的：

你会发现第2个APP打开的时候会闪退，并且闪退的日志没在第一个命令行窗口里，而是跑到了第1个项目的窗口中了。这里有2种改法，改起来其实很简单：

改法一：使用fromServerIp的方式，传入电脑IP地址和端口号，这个端口号就是你启动RN服务端时候的那个，一定要一一对应才行。

改法二、直接传入bundle的全路径，其中就会带上具体的端口号，也是一样必须和RN服务端那边的端口号一一对应才行：

四、加载bundle的方式介绍

在鸿蒙原生这边可以使用多种方式去加载RN的bundle，Demo里面也都给了一个实例。注意这里AnyJSBundleProvider是一个数组，这就意味着可以同时设置多种加载方式，会自动获取目前已支持的方式。所以这里其实有一个小技巧，就是多个项目同时调试的时候，你可以多设置几个端口，以防止RN服务端关闭以后，端口仍然被占用的情况。我这边给大家分享一下我个人对于这些加载方式的看法，先看下Demo中的代码：

方式一：new MetroJSBundleProvider()

使用这种方式加载的话，会自动获取到你电脑的IP地址，然后端口号写死8081。这就意味着你只能有一个RN项目使用这个方式，不然就冲突了。

方式二：MetroJSBundleProvider.fromServerIp(ip, port)

这个方式写法相对来说比较简洁，同时可以灵活设置端口号，以达到同时热加载多个项目的目的。缺点就是每次你切换网络或者电脑，这里都需要重新设置一下IP，不是很方便。

方法三：new MetroJSBundleProvider(url)

这种方式也可以实现动态修改端口号的目的，而且由于不需要添加IP地址，这种方式将不会随着网络切换和电脑更换的变化而变化。个人觉得如果是在需要调试多个RN项目的情况下，首推这种方式。

方法四：new ResourceJSBundleProvider()

这种方式是在bundle包内置到assets下面的时候使用的，也就是说加载项目中固定的某个bundle。如果你们项目中没有实时更新功能的需求的话，就可以使用这种方式，直接将bundle内置到项目中进行上线。当然还有一种用法，就是将它作为一个backup，在网络不好没有拉取到远程bundle的时候，就使用这个项目中内置的包。

方法五：new FileJSBundleProvider(fileUrl)

这种方式一般用来线上使用了，可以从用户的手机本地拉取最新下载的bundle进行加载，从而使得功能迭代、Bug修复更加快速。

五、本文总结

本文中，我分享了如何在原生鸿蒙项目中进行RN热加载。同时也给出了我在此期间遇到过的问题，并且都给出了解决方案，还分享了如何进行多个RN项目同时调试。

其次，我对原生鸿蒙这边加载bundle的方式代码进行了简单的分析，希望能对大家有所帮助。对于文章中有异议的地方，也欢迎大家批评指正。

在下一篇中，我将分享鸿蒙RN中的日志系统，感兴趣的家人们可以点赞关注支持一下，方便后续第一时间能查看到我最新的分享。