ReactNative项目构建分析与思考之RN组件化

传统RN项目对比

ReactNative项目构建分析与思考之react-native-gradle-plugin

ReactNative项目构建分析与思考之native_modules.gradle

ReactNative项目构建分析与思考之 cli-config

在之前的文章中,已经对RN的默认项目有了一个详细的分析,下面我们来看一下如何在已有项目中集成RN。

官方给了一个详细的文档,也比较简单。
这里就不再把文档中的内容重复了,直接来看一下跟默认项目的区别。

相同之处

  • 项目结构:两者项目结构基本相同,主要以RN的项目结构为核心,其中Android部分作为子目录集成于RN项目中。
  • 组织逻辑:都需要集成RN提供的插件以及native_modules脚本,来对项目进行组织和构建。

不同之处

  • UI处理方式
    • 默认项目:纯RN项目中,视图渲染是在Activity级别进行,所有视图均由RN渲染。
    • 集成到已有项目:视图的渲染粒度更为灵活,可以是Activity级别,也可以是Fragment或View级别。开发者可以根据具体业务需求,自由选择由RN还是原生代码来渲染视图,提供更加定制化的用户体验。
  • 定制化能力
    • 默认项目:定制化能力相对有限,主要依赖于RN官方提供的插件和组件。
    • 集成到已有项目:通过将RN作为组件集成,有更高的灵活性和定制化空间。可以根据业务需求开发专属的RN插件,还能在项目中灵活地利用RN的强大功能,从而实现更丰富和个性化的应用体验。

也就是说,两种方式在代码组织上并无本质上的区别,仅仅是在UI处理方式和定制化能力上有所不同。

RN项目搭建思考

找出核心点

对于RN官方给到我们的两种项目结构,实际上都是以RN为核心的,但是在实际的开发中,更多的是在已有项目中引入RN,我们更加希望RN作为原生项目的一个模块或者组件来进行混合开发。
例如下面这种组织结构:
在这里插入图片描述
react-native是Android工程中的一个模块,而不是 android 是RN项目下的一个子目录这种结构。

对于已有项目来说,需要考虑的是如何能够更简单的引入RN,尽量不要破坏Android项目的目录结构以及构建模式。
毕竟无论是目录结构的迁移还是构建模式的改变,都是一个非常大的工程。

要实现这种方式,实际上也比较简单,在前面的文章中,我们已经对RN的构建流程搞得比较清楚了。下面主要就是结合官方的在已有项目中集成RN的文档,稍作改造,集成到已有项目中即可。

参考在已有项目中集成RN的文档,相较于传统的Android项目,核心的点在于 React Native 相关的依赖需要从 node_modules 中引入 ,主要包括:

  • React Native 源码
  • React Native 插件:react-native-gradle-plugin
  • React Native 脚本:native_modules.gradle
  • React Native 中需要用到的原生模块:native module

其中,React Native源码和原生模块的引入是必须要处理的,因为他们是RN的核心部分。
而 react-native-gradle-plugin 和 native_modules.gradle 这两个插件是可选的,可以根据项目的实际情况来决定是否引入。

也就是说,核心的关键点在于,如何能够绕过 node modules 来解决掉依赖。

处理 React Native 的依赖

这里分两种情况

  1. 直接引入 Maven 仓库中的 React Native 依赖
  2. 自己编译 React Native 源码,打出 AAR 包引入

直接从 Maven 仓库中引入 React Native 依赖

从React Native 0.71.0版本开始,React Native提供了Maven仓库,可以直接从Maven仓库中引入React Native的依赖。

在这里插入图片描述

注意,这里的依赖是指React Native的Android部分,也就是react-android和hermes-android。

// https://mvnrepository.com/artifact/com.facebook.react/react-android
implementation("com.facebook.react:react-android:0.71.0")
implementation("com.facebook.react:hermes-android:0.71.0")

这种方式对于RN版本是0.71.0以上并且对源码没有定制要求的情况非常适用。

自己编译 React Native 源码,打出 AAR 包引入
在0.71.0版本之前,React Native没有提供Maven仓库,所以只能通过源码编译的方式来引入React
Native的依赖,或者使用传统的直接从nodu_modules中引入源码的方式。

在日常开发中,React Native源码本身存在一些bug或者不符合自身业务需求的地方,此时,我们也需要对源码进行修改。

优点: 可以根据自己的需求来修改源码,无需依赖于官方的发布版本,也可以更好地适应项目的需求,自由度相对更高

缺点: 需要自己维护这个AAR包,当React Native官方发布新版本时,需要自己手动同步源码,然后重新编译打包。
也可以采用字节码插桩的方式,直接在项目中引入React Native的源码,然后针对需要修改的地方进行修改,这样可以减少维护成本。

不管是需要修改源码还是针对低版本的React Native,自行编译源码都是很有必要的操作。
所以,个人还是推荐自行编译源码的方式,这样可以更好地适应项目的需求,也可以更好地理解React Native的构建过程。

处理 native module 的依赖

在Android中对于React Native中的Native Module而言,本质上就是一个Android Library Module,我们可以把Native
Module作为一个独立的模块引入到项目中。

这里也有两种做法

  1. 采用传统的方式,直接把Native Module作为一个独立的模块引入到项目中,也就是直接依赖源码。
  2. 自己编译Native Module,打出AAR包引入

关于源码依赖的方式,管理起来就相对复杂一些,为了方便的管理这些native module,可以针对package.json文件进行处理,把依赖的native
module中的android部分的代码安装到Android项目中。通过project的方式依赖进项目,这样相当于把native module作为一个独立的模块引入到项目中。

个人更加推荐自己编译Native Module,打出AAR包引入的方式,自己开发的Native Module不用说,本质上就是一个Android Library
Module,所以可以直接打出AAR传到maven私有仓库中通过远程依赖的方式实现。
对于三方的Native Module,也可以把源码拉下来自行编译,打出AAR通过远程依赖的方式引入到项目中。

处理 React Native 插件和脚本

上面也说到了,react-native-gradle-plugin 和 native_modules.gradle 这两个插件是可选的,他们的作用主要是帮助我们更好地管理React Native的构建过程,方便我们在项目中引入React Native的功能。

个人的建议是根据自身的需求,对插件和脚本进行定制化的来引入,也方便于App项目直接跟React Native源码联调时不至于依赖出问题。

如下示例:

在这里插入图片描述

相较于传统RN结构的模式,这种结构更加清晰,也更符合Android项目的组织方式。

同时,也可以方便的把RN进行组件化。对于已有项目来说,基本也没什么改动,是一个比较好的选择。

总结

到这里,RN的默认项目结构和构建的分析,以及对如何更加贴近日常开发的RN项目搭建的思考就结束了,希望能给到各位大佬一些帮助。


感谢阅读,觉有有帮助点赞支持,如果有任何疑问或建议,欢迎在评论区留言。如需转载,请注明出处:喻志强的博客 ,谢谢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/771341.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ElasticSearch启动报错:Exception in thread “main“ SettingsException

Exception in thread "main" SettingsException[Failed to load settings from [elasticsearch.yml]]; nested: ParsingException[Failed to parse object: expecting token of type [START_OBJECT] but found [VALUE_STRING]]; 这个报错说明elasticsearch.yml这个配…

企业如何进行数字化转型?

企业进行数字化转型是一个系统性工程,涉及战略规划、技术应用、组织变革和人才培养等多个方面。以下是实现企业数字化转型的一些关键步骤和要素: 1.战略规划与目标设定: 明确数字化转型的目标和愿景,确保与企业整体战略相一致。 …

Linux:rpm部署Jenkins(1)

1.获取Jenkins安装包 我这里使用的是centos7系统,ip为:192.168.6.6 2G运存 连接外网 Jenkins需要java环境,java的jdk包你可以去网上下载离线包,或者直接去yum安装,我这里使用的是yum安装 再去获取Jenkins的rpm包…

每日一题——LeetCode1720.解码异或后的数组

方法一 异或运算的性质 encoded[i−1]arr[i−1]⊕arr[i] 在等式两边同时异或arr[i−1] 由于: 一个数异或它自己,结果总是0。 0异或任何数,结果都是那个数本身。 所以等式可以转化为: arr[i]arr[i−1]⊕encoded[i−1] 由于 a…

量子时代隐患显露!苹果CPU漏洞被爆,Mac用户敏感数据易遭窃取

研究表明,一项使Apple M系列处理器速度更快的功能也使它们容易受到无法修补的新侧信道攻击。理论上,黑客可以提取秘密加密密钥,然后访问敏感数据。 这个新发现的概念验证攻击被称为“GoFetch”。 GoFetch基于一种称为数据内存依赖预取器&…

qrcode插件-生成二维码

安装 yarn add qrcodejs2 --save npm install qrcodejs2 --save 使用 <template><div><div id"qrcodeImg"></div><!-- 创建一个div&#xff0c;并设置id --></div> </template> <script> import QRCode from q…

利用Python和IP技术实现智能旅游情报系统

文章目录 引言一、系统架构设计1. 数据采集模块2. 数据处理模块3. 用户界面模块 二、数据获取技术应用三、系统功能展示四、亮数据采集工具介绍五、总结六、号外 引言 随着旅游行业的不断发展&#xff0c;人们对旅游信息的需求也越来越大。为了帮助旅行者更好地规划行程&#…

Nodejs沙盒逃逸

Buffer 在较早一点的node.js版本中 (8.0 之前)&#xff0c;当 Buffer 的构造函数传入数字时, 会得到与数字长度一致的一个 Buffer&#xff0c;并且这个 Buffer 是未清零的。8.0 之后的版本可以通过另一个函数 Buffer.allocUnsafe(size) 来获得未清空的内存。 注&#xff1a;关…

P1219八皇后 (典DFS)

注意&#xff1a; 数组大小要开够&#xff0c;数据范围是6到13&#xff0c;要开到20&#xff0c;不然开到15数据点没法全部过。 代码&#xff1a; #include<algorithm> #include<iostream> #include<cstring> #include<queue>using namespace std;i…

Rocket mq

搭建服务【有2个】 一个是NameServer还有一个是Broker&#xff0c;要两个服务协同 后台启动服务 允许服务端自己创建topic&#xff0c;如果客户端传来的topic没有的话 然后搞个rocket mq的仪表盘&#xff0c;application.yml改成自己的地址【只需要指定NameServer的地址&#…

更灵活的定位内存地址的方法

文章目录 更灵活的定位内存地址的方法and和or指令关于ASCII码以字符形式给出的数据大小写转换的问题[bxidata]用[bxidata]的方式进行数组的处理SI和DI[bxsi]和[bxdi][bxsiidata]和[bxdiidata]不同的寻址方式的灵活应用题目示例 更灵活的定位内存地址的方法 and和or指令 1&…

Axure RP 8中文---快速原型设计工具,一站式解决方案

Axure RP 8是一款专业的快速原型设计工具&#xff0c;以其直观易用的界面和丰富的功能受到广大用户的青睐。它支持用户通过拖放操作快速创建交互式原型&#xff0c;包括线框图、流程图等&#xff0c;并具备高保真度的设计能力。Axure RP 8还提供了团队协作和共享功能&#xff0…

【Java程序设计】【C00368】基于(JavaWeb)Springboot的箱包存储系统(有论文)

TOC 博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;已经做了六年的毕业设计程序开发&#xff0c;开发过上千套毕业设计程序&#xff0c;博客中有上百套程序可供参考&#xff0c;欢迎共同交流学习。 项目简介 项目获取 &#x1f345;文末点击卡片…

基于nodejs+vue铁路订票管理系统python-flask-django-php

该铁路订票管理系统采用前后端分离进行设计&#xff0c;并采用nodejs语言以及express框架进行开发。本系统主要设计并完成了用户登录管理过程、个人信息修改、用户管理、火车类型管理、火车信息管理、车票预订管理、车票退票管理、系统管理等功能。该系统操作简单&#xff0c;界…

13_Linux内核配置选项

内核配置选项 内核配置通常是对内核支持的各个功能进行取舍配置&#xff0c;将配置的方案保存到 configure文件中。在编译内核的时候&#xff0c;就会根据此配置对内核进行取舍编译。 编译内核之前要先配置。为了正确、合理地设置内核编译配置选项&#xff0c;从而只编译系统需…

BM85 验证IP地址(字符串)

import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** 验证IP地址* param IP string字符串 一个IP地址字符串* return string字符串*/public boolean isIPv4(String IP){//没有.i…

单片机入门到精通:一站式在线学习平台!

介绍&#xff1a;单片机&#xff0c;也称为微控制器&#xff08;MCU&#xff09;&#xff0c;是一种集成了中央处理器&#xff08;CPU&#xff09;、随机存储器&#xff08;RAM&#xff09;、只读存储器&#xff08;ROM&#xff09;以及输入/输出接口于单一芯片上的微型计算机。…

11.测试教程-自动化测试selenium-3

文章目录 1.unittest框架解析2.批量执行脚本2.1构建测试套件2.2用例的执行顺序2.3忽略用例执行 3.unittest断言4.HTML报告生成5.异常捕捉与错误截图6.数据驱动 大家好&#xff0c;我是晓星航。今天为大家带来的是 自动化测试selenium第三节 相关的讲解&#xff01;&#x1f600…

2024年大模型面试准备(三):聊一聊大模型的幻觉问题

节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学&#xff0c;针对大模型技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何备战、面试常考点分享等热门话题进行了深入的讨论。 合集在这…

羊大师羊奶靠谱么?信誉与持续见证,共筑信赖之选

羊大师羊奶靠谱么&#xff1f;信誉与持续见证&#xff0c;共筑信赖之选 在如今注重健康饮食的时代&#xff0c;羊奶以其丰富的营养价值和独特的风味&#xff0c;逐渐受到了消费者的青睐。在众多羊奶品牌中&#xff0c;羊大师羊奶以其出色的品质、良好的信誉和持续的创新精神&a…