当前位置: 首页 > article >正文

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

在原生鸿蒙系统中进行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.kler.cn/a/402435.html

相关文章:

  • 抖音SEO矩阵系统:开发技术分享
  • 电脑开启虚拟化的方法
  • Excel把其中一张工作表导出成一个新的文件
  • 11超全局变量php
  • SCAU软件体系结构实验四 组合模式
  • Python 获取微博用户信息及作品(完整版)
  • gin源码阅读(2)请求体中的JSON参数是如何解析的?
  • 科技赋能-JAVA发票查验接口、智能、高效的代名词
  • 【springboot】配置文件加载顺序
  • 「四」体验HarmonyOS端云一体化开发模板——工程目录结构与云侧工程一键部署AGC云端
  • 【D01】网络安全概论
  • mySql修改时区完整教程
  • 实战精选|如何使用 OpenVINO™ 在 ElectronJS 中创建桌面应用程序
  • Stable Diffusion核心网络结构——CLIP Text Encoder
  • 修改gitee提交时用户名密码输错导致提交失败的解决方法
  • 第14章 Nginx WEB服务器企业实战
  • 详细描述一下Elasticsearch搜索的过程?
  • 计算机网络安全 —— 对称加密算法 DES (一)
  • Linux TCP 服务器实现双向通信1v1
  • 【系统架构设计师】真题论文: 论企业应用系统的数据持久层架构设计(包括解题思路和素材)
  • Go小记:使用Go实现ssh客户端
  • Golang超详细入门教程
  • android 性能分析工具(04)Asan 内存检测工具
  • ROS2 Humble 机器人建模和Gazebo仿真
  • 【H2O2|全栈】MySQL的云端部署
  • 精通Rust系统教程-过程宏入门