一、背景
在上一篇博客中，我分享了将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实例，即可启用热加载的功能：
kotlin 代码解读this.ctx.devToolsController.eventEmitter.subscribe("RELOAD", async () => {
this.cleanUp();
ths.init();
})3、原生代码中使用metro加载器
这一步也推荐大家使用RNAPP的方式进行Bundle的加载，具体操作可以看我上一篇的博客。
场景一、如果你是使用RNAPP启动的RN框架，则只需要将 new MetroJSBundleProvider() 传给 jsBundleProvider 属性即可：
arduino 代码解读RNApp({
...
// 方式1
// jsBundleProvider: new MetroJSBundleProvider()
jsBundleProvider: new TraceJSBundleProviderDecorator(
new AnyJSBundleProvider([
// 方式2
new MetroJSBundleProvider(),
]),
this.rnohCoreContext.logger),
})场景二、不使用 RNAPP 的话，需要开发者自己去创建并管理 RNInstance，假设你已经拥有了一个 RNInstance 的实例 rnInstance，加载Metro服务的方法可参考如下代码：
arduino 代码解读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中的日志系统，感兴趣的家人们可以点赞关注支持一下，方便后续第一时间能查看到我最新的分享。
作者：美食家5250
链接：https://juejin.cn/post/7438140246632316962?searchId=202411181143551561F7AD426A84484187
暂无评论内容