原生鸿蒙中实现RN热加载的详细步骤

ops/2024/11/20 3:00:11/

在原生鸿蒙系统中进行React Native(RN)热加载,可以极大地提高开发效率,使开发者能够在不重启应用的情况下即时看到代码更改的效果。以下是在原生鸿蒙中实现RN热加载的详细步骤。

一、准备工作

  1. 创建鸿蒙原生项目
    • 在鸿蒙开发环境中,创建一个新的原生项目。
    • 在项目最外层新建react-native-harmony以及react-native-harmony-cli文件夹,并将鸿蒙的相应tgz包放入相应文件夹中。
  2. 关联鸿蒙tgz文件
    • 打开package.json,在dependencies中关联上前面新建的tgz包。
    • 在鸿蒙项目的根目录中,新建一个libs文件夹,将官方提供的openharmony包复制进去。
    • 修改原生项目的oh-package.json文件,关联刚刚复制进去的openharmony包。
  3. 配置Metro热加载
    • 在项目的metro.config.js文件中配置Harmony平台的Metro配置选项。
    • 使用metro来实现热加载功能,具体配置代码可以参考官方文档或相关教程。

二、设置热加载环境

  1. 创建支持热加载的RNInstance
    • 如果你是使用RNAPP启动的RN框架,RNAPP中已封装好相关环境,不需要特别的配置。
    • 如果你是使用的RNSurface,需要创建一个RNComponentContext,并在contextdevToolsController中增加事件监听,以启用热加载功能。
  2. 配置IDE热重载
    • 在IDE中,找到Tools Actions on Save设置,勾选Perform hot reload
    • 运行工程,看到UI界面后,选择entry,然后编辑配置,选择热重载项目。

三、启动热加载

  1. 启动RN服务端
    • 打开命令行,执行npm start命令启动RN服务端。
    • 如果使用多个RN项目,需要使用不同的端口来区分,例如npm run start -- --port=8081npm run start -- --port=8082
  2. 配置鸿蒙原生端
    • 在鸿蒙原生端,使用new MetroJSBundleProvider()的方式加载RN的bundle。
    • 如果使用RNAPP,将new MetroJSBundleProvider()传给jsBundleProvider属性。
    • 如果不使用RNAPP,需要开发者自己去创建并管理RNInstance,并加载Metro服务。
  3. 测试热加载
    • 修改RN代码后,保存文件(通常使用Ctrl+S),改动后的代码会自动同步到手机上。
    • 如果热加载成功,你会看到应用界面立即更新为最新的代码效果。

四、注意事项

  1. 热加载范围
    • 热加载通常只适用于更改build()以内的页面内容。
    • 更改state之类的状态管理时,可能需要重新运行应用才能看到效果。
  2. 端口冲突
    • 如果在启动RN服务端时遇到端口冲突问题,可以尝试使用其他端口或重启手机。
  3. 调试冲突
    • 在进行RN调试时,不能同时调试原生代码,二者只能一个一个来。

通过以上步骤,你可以在原生鸿蒙系统中成功实现RN热加载,从而大大提高开发效率和体验。希望这篇文章对你有所帮助!


http://www.ppmy.cn/ops/135136.html

相关文章

HTTP常见的状态码有哪些,都代表什么意思

HTTP 协议定义了一系列的状态码,用于描述服务器对客户端请求的处理结果。这些状态码分为五个类别,每个类别都有特定的用途。 常见状态码 1开头 信息性状态码 这些状态码表示请求已被接收,继续处理。 100 Continue:客户端应继续…

golang对日期格式化

1.对日期格式化为 YYYY-mm-dd, 并且没有数据时,返回空 import ("encoding/json""time" )type DateTime time.Timetype SysRole struct {RoleId int64 gorm:"type:bigint(20);primary_key;auto_increment;角色ID;" json:&quo…

华为开源自研AI框架昇思MindSpore应用案例:人体关键点检测模型Lite-HRNet

如果你对MindSpore感兴趣,可以关注昇思MindSpore社区 一、环境准备 1.进入ModelArts官网 云平台帮助用户快速创建和部署模型,管理全周期AI工作流,选择下面的云平台以开始使用昇思MindSpore,获取安装命令,安装MindSpo…

Centos使用人大金仓ksql

文章目录 1.进入ksql的目录2.连接数据库3.切换数据库4.罗列模式下的相关表5.执行SQL脚本6.查看表结构 1.进入ksql的目录 [rootlocalhost ~]# cd /opt/package/Kingbase/ES/V8/KESRealPro/V008R006C008B0014/Server/bin [rootlocalhost bin]# 2.连接数据库 ./ksql 数据库 用户…

斯坦福iDP3——改进3D扩散策略以赋能人形机器人的训练:不再依赖相机校准和点云分割(含源码解析)

前言 今天10.23日,明天1024则将作为长沙程序员代表,在CSDN和长沙相关部门举办的1024程序员节开幕式上发言,欢迎广大开发者来长工作 生活 考察 创业,​包括我司七月也一直在招聘大模型与机器人开发人员 后天,则将和相关…

kafka中topic的数据抽取不到hdfs上问题解决

在上一个博客中有一个案例: 将json文件抽取到kafka的消息队列(topic)中,再从topic中将数据抽取到hdfs https://blog.csdn.net/qq_62984376/article/details/143759037?spm1001.2014.3001.5501 我们在从kafka中topic的数据抽到hdf…

讯飞、阿里云、腾讯云:Android 语音合成服务对比选择

在 移动端 接入语音合成方面,讯飞和腾讯云等都是优秀的选择,但各有其特点和优势。咱们的需求是需要支持普通话/英语/法语三种语言,以下是对各个平台的详细比较: 一、讯飞语音合成介绍 与语音听写相反,语音合成是将一段…

【机器学习】回归模型(线性回归+逻辑回归)原理详解

线性回归 Linear Regression 1 概述 线性回归类似高中的线性规划题目。线性回归要做的是就是找到一个数学公式能相对较完美地把所有自变量组合(加减乘除)起来,得到的结果和目标接近。 线性回归分为一元线性回归和多元线性回归。 2 一元线…