一、背景
在上一篇博客中,我分享了将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中的日志系统,感兴趣的家人们可以点赞关注支持一下,方便后续第一时间能查看到我最新的分享。
作者:美食家5250
链接:https://juejin.cn/post/7438140246632316962?searchId=202411181143551561F7AD426A84484187
暂无评论内容