AndroidRN的混合集成 下载不了RN的依赖可以看看 好使

news2024/12/23 14:10:10

一、混合开发

App 混合开发，指的是一个 App 部分功能用 Native 构建，其他功能使用跨端框架进行构建，最常见的场景是，Native 作为一个可工程，其实业务开发使用垮端框架进行开发。目前，比较流行的跨端框架有 H5、React Native、Flutter、布局动态化等。

而在以 Native 与 React Native 混合开发中，同一个 App 中，混合开发通常有以下几种形态：

那究竟有哪些公司在使用 React Native 呢？

首先，是一些大型 App 中，比如美团、携程、京东、58 等。这些大型 App 一般都非常复杂，整个框架需要包含模块化、组件化、插件化、跨端等能力。相比纯 React Native 工程，大型 App 的实际业务开发还需要考虑如何在已有原生项目中引入 React Native，作为原生框架的扩展能力。比如，部分业务可能对开发效率、多端一致性、动态更新能力有较强要求，就可以使用 React Native 来实现。

除了大型 App 外，如果想要在已上线的项目引入 React Native，也需要使用混合开发模式。因为原生改造成 React Native 并不是那么简单的事情，毕竟开发语言、页面管理、模块管理完全是另一套东西，而且一些原生页面，如启动页、首页等，出于性能考虑，大都还是会选择原生来实现，对一些业务要求不高的业务则使用 React Native 进行开发。

当然，对于一些新开发的轻量级 App，完全可以选择纯 React Native 模式。因为新开发的 App 没有技术债，可以从 0 到 1 享受 React Native 跨端的优势。那使用 React Native 模式有哪些优势呢？

  • 开发效率高，一套代码可以在 Android、iOS 上运行；
  • 更新部署方便，无须依赖应用市场发版，迭代更新速度快；
  • 具备动态更新能力，特别是国内 App，以 Android 为例，受限于 Google Play，无法使用 Android App bundle，而插件化框架又存在稳定性问题，而 React Native 可以解决这一痛点。

当然，也有一些缺点：

  • 性能不佳：H5 渲染链路长；React Native 依托于 JS bridge 交互 （旧版，最新架构使用 JSI）；虽然 Flutter 绘制流程直接使用 Skia，但依赖于原生的能力仍需异步交互；
  • 兼容性差：Android、iOS 各版本都存在各种兼容性问题，特别是 Android 碎片化严重；
  • 问题排查成本高：跨端框架一般涉及 Native、FE、Server，中间做了大量的桥接转换，排查链路比纯 Native 长；
  • 动态化能力受限：相比纯原生的插件化，跨端框架动态更新的业务如果涉及 Native 部分的组件更新，需要依赖 App 发版。

不过，虽然跨平台有自己的缺点，但是很多大型 App 都是会选择它，至于是选择 H5 + React Native + 布局动态化，或者 H5 + Flutter，需要依据业务场景、包大小、性能、运行内存、动态更新能力为标准进行选取。

那如果从 0 到 1 搭建一个混合项目呢？

二、环境搭建

混合开发需要原生环境的支持，所以请确保本地已经配置了原生 Android 和 iOS 的开发环境。

2.1 Android 混合开发

2.1.1 创建 Android 工程

首先，使用 Android Studio 创建一个新的 App 项目，如果你已经有了本地项目，可以跳过此步骤。填写完项目名称、包名、项目本地路径后，点击 “Finish” 按钮。你可以把这个项目名称取名为 “GeekTimeRNAndroid”。
 

2.1.2 添加 React Native 依赖

创建好本地工程后，我们就要给它添加依赖。其实，React Native 官方对集成到现有的原生应用提供了相应的 文档 。

按照官方文档的提示，我们需要“创建一个空目录用于存放 React Native 项目，然后在其中创建一个 /android 子目录，把你现有的 Android 项目拷贝到 /android 子目录中”。

当然，官方提供的方式是非常不错的，它偏向于 React Native 的工程管理模式。而我们在实际开发中，特别是已经上线的项目里面，React Native 功能和其他业务功能一样，一般会被当成原生工程的子模块来管理，所以我们这边选择偏向混合工程管理方式来集成。

下面是 RN 混合开发的几种存在方式：

可以看到，对比官方的接入模式，原生混合 RN 的工程模式有以下好处：

  • 可以不侵入现有工程结构，React Native 模块会作为现有工程的一部分进行组织管理。
  • 不会影响代码仓库管理，不用把 Android、iOS 放在同一代码仓库下进行管理。
  • 混合模式方便我们进行组件功能复用，可以将 React Native 模块独立成组件，提供给其他 App 平台使用。

需要说明的是，使用上面的方式集成 React Native 模块时，需要添加 react-native 和 JavaScript 引擎的依赖。

  • react-native：React Native 的核心框架；
  • JavaScript 引擎：可选 JSC、Hermes，用于执行 JavaScript。

接下来，我们参考官方文档，添加 React Native 依赖，如下。

# 切换到刚刚新建好的工程目录
cd /Users/Mac/RN/RNAndroid

# 执行添加 react-native 命令，yarn 或 npm 都可以
yarn add react-native

执行 yarn add react-native 命令后，默认会安装最新版本的 React Native 包。执行以上命令成功之后，我们会发现 RNAndroid 工程下多了一个 node_modules 目录，里面不仅有 react-native 框架，还有 JavaScript 引擎编译好的产物，包括 aar 和 pom 依赖文件。接下来，我们可以参考官方提供的方式，将 node_modules 目录配置为 repository，然后在工程中引入相关依赖。

不过，这种方式并不太推荐，其实我们只需要 react-native 和 JavaScript 引擎这两个产物就可以了。获取这两个产物后，在 Android 自己进行二次封装，然后发布到公司的远程仓库。

接着打开 node_module 中的 react-native 框架编译产物，位于…/RNAndroid/node_modules/react-native目录，如下图。

node_module 中的 JSC 引擎编译产物位于…/RNAndroid/node_modules/JavaScriptc-android目录。

除此之外，新版本的 RN 还接入了 Hermes 引擎，node_module 中的 Hermes 引擎编译产物位于…/RNAndroid/node_modules/hermes-engine目录。

对于 JSC 引擎和 Hermes 引擎，我们需要注意以下两点常识：

  • 在启动性能上，Hermes 比 JSC 更快。Hermes 采用的是 AOT 提前编译的方案，它支持字节码文件，相比于 JSC，Hermes 不用先将 JavaScript 文本编译为字节码，节约了编译字节码的耗时，自然启动性能更好。
  • 在运行性能上，JSC 比 Herems 更快。JSC 使用的是 JIT 即时编译方案，该方案支持动态缓存热点代码，因此运行性能上更快。

但整体而言，由于 Hermes 引擎是专门为移动端定制的，在引擎大小、启动速度、运行内存、通信性能等方面都优于 JSC。

接下来，我们继续被 RNAndroid 工程添加 react native 相关的依赖，包括：

  • react-native.arr 文件；
  • react-native.aar 依赖的第三方库；
  • JavaScript 引擎 aar 文件。

首先，我们添加 react-native.arr 文件。我们将上面的 react-native.arr 拷贝放置到 RNAndroid/libs 目录下，然后添加依赖。

implementation fileTree(dir: 'libs',includes: ['*.jar','*.aar'])

implementation(name:'react-native-0.68.2', ext:'aar')

接着，我们再将 …/RNAndroid/node_modules/react-native/ 目录下的 react-native-0.68.2.pom 中的依赖库，按照 android gradle 依赖的方式进行添加，这些依赖主要是 react-native aar 本身远程依赖的第三方库。添加好的build.gradle 如下：

dependencies {
    implementation(name:'react-native-0.68.2', ext:'aar')
    
    implementation 'com.facebook.infer.annotation:infer-annotation:0.18.0'
    implementation 'javax.inject:javax.inject:1'
    implementation 'androidx.appcompat:appcompat:1.0.2'
    implementation 'com.facebook.fresco:imagepipeline-okhttp3:2.5.0'
    implementation 'com.facebook.fresco:fresco:2.5.0'
    implementation 'com.facebook.soloader:soloader:0.10.3'
    implementation 'com.google.code.findbugs:jsr305:3.0.2'
    implementation 'com.squareup.okhttp3:okhttp:4.9.2'
    implementation 'com.squareup.okhttp3:okhttp-urlconnection:4.9.2'
    implementation 'com.squareup.okio:okio:2.9.0'

    ... //省略其他依赖
}

接下来，我们继续添加 JavaScript 引擎 aar 包。打开 …/RNAndroid/node_modules/hermes-engine 目录下的 hermes-cppruntime-release.aar & hermes-release.aar，然后拷贝到 libs 目录，并在 build.gradle 中添加依赖。

dependencies {
   
    implementation(name:'android-jsc-r250230', ext:'aar')
    ... //省略其他依赖 
}

2.1.3 权限配置

添加依赖后，接下来还需要进行权限的配置，打开混合工程的 AndroidManifest.xml 清单文件中，然后添加网络权限和访问开发者菜单。

<uses-permission android:name="android.permission.INTERNET" />

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

至此，Android 混合工程中的 React Native 环境配置就已经完成了。接下来我们再看看，如何在 iOS 中进行 React Native 环境配置。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ORB-SLAM3算法学习—双目和单目初始化

ORB-SLAM3算法学习—双目和单目初始化

0总述 ORB-SLAM3算法中视觉的初始化依旧放在tracking线程中&#xff0c;因此在tracking中没有为imu模式设置单独的初始化函数&#xff0c;而IMU的初始化是在localMapping中实现的。 很有用的参考链接&#xff1a;https://cloud.tencent.com/developer/article/1761043 1双目…
阅读更多...
Python 基础教程（1）

Python 基础教程（1）

1.翻转字符串 def reverseWords(input):# 通过空格将字符串分隔符&#xff0c;把各个单词分隔为列表inputWords input.split(" ")# 翻转字符串# 假设列表 list [1,2,3,4], # list[0]1, list[1]2 &#xff0c;而 -1 表示最后一个元素 list[-1]4 ( 与 list[3]4 一样…
阅读更多...
C++ 使用CLion + LibTorch 调用Python训练的PyTorch模型-MNIST

C++ 使用CLion + LibTorch 调用Python训练的PyTorch模型-MNIST

C++ 使用CLion + LibTorch 调用Python训练的PyTorch模型-MNIST 安装LibTorch 进入pytorch官网地址，选则LibTorch版本将LibTorch安装包解压到libtorch-path目录中，libtorch-path是自定义的LibTorch安装目录。
阅读更多...
【SpringCloud Alibaba】Sentinel持久化结合Nacos

【SpringCloud Alibaba】Sentinel持久化结合Nacos

在前面学习完Sentinel的流控规则以及Nacos时&#xff0c;就是最后的Sentinel持久化了。需要持久化的原因是因为每次启动Sentinel都会使之前配置的规则就清空了&#xff0c;这样每次都要再去设定规则显得非常的麻烦。 思路就是&#xff1a;将流控规则配置进Nacos服务注册中心中&…
阅读更多...
【实时数仓】DWS层之关键词主题表（FlinkSQL）、数据可视化接口、Sugar数据大屏、总成交金额接口实现

【实时数仓】DWS层之关键词主题表（FlinkSQL）、数据可视化接口、Sugar数据大屏、总成交金额接口实现

文章目录一 DWS层-关键词主题表(FlinkSQL)1 过滤数据2 利用UDTF进行拆分&#xff08;1&#xff09;拆分结果&#xff08;2&#xff09;Join 表函数 (UDTF)&#xff08;3&#xff09;代码3 分组、开窗、聚合计算4 转换为流并写入ClickHouse&#xff08;1&#xff09;在ClickHous…
阅读更多...
大数据网站攻击实时项目架构

大数据网站攻击实时项目架构

随着互联网的流行&#xff0c;网站安全问题就日益突出&#xff0c;但绝大多数的网站开发与建设公司只考虑正常用户的稳定使用&#xff0c;而对于网站安全方面了解甚少&#xff0c;发现网站安全存在问题和漏洞&#xff0c;其修补方式只能停留在页面代码的删除或者是恢复网站备份…
阅读更多...
SpringBoot系列之SpringBoot启动流程详解

SpringBoot系列之SpringBoot启动流程详解

文章目录前言一、SpringBoot流程分析-初始化二、SpringBoot流程分析-run总结前言 SpringBoot的启动流程在我们面试的时候会经常被问&#xff0c;接下来我们根据源码来分析了解下SpringBoot是怎么启动的 一、SpringBoot流程分析-初始化 首先对SpringBoot主启动类进行debug&…
阅读更多...
通用企业智能制造ERP源码 制造业通用ERP系统源码 工厂ERP源码C# web ASP.NET 源码

通用企业智能制造ERP源码 制造业通用ERP系统源码 工厂ERP源码C# web ASP.NET 源码

管理控制台 一&#xff0c;基础档案 客户档案、 供应商档案 、外协档案 、 物料档案、 产品档案 产品BOM 、 模具档案、 工价档案 、 人员档案 二&#xff0c;样品开发 产品开发 样品登记 产品开发&#xff1a;开发编号、设计来源、系列号、中英文设计名称、最后期限、…
阅读更多...
Nginx由浅入深

Nginx由浅入深

一、Nginx简介 1、Nginx 概述 Nginx (“engine x”) 是一个高性能的 HTTP 和反向代理服务器,特点是占有内存少&#xff0c;并发能力强&#xff0c;事实上nginx的并发能力确实在同类型的网页服务器中表现较好&#xff0c;中国大陆使用nginx网站用户有&#xff1a;百度、京东、新…
阅读更多...
医院医疗信息管理系统源码 成熟EMR电子病历系统源码

医院医疗信息管理系统源码 成熟EMR电子病历系统源码

医院医疗信息管理系统源码 成熟EMR电子病历系统源码 多家二甲医院在用&#xff0c;功能模块如下所示&#xff1a; 1.住院医生站 2.住院护士站 3.病案浏览工作站 4.质量控制工作站 5.系统维护工作站 开发环境 &#xff1a;VS2010 C# ORACLE 系统简介&#xff1a; 1各种记…
阅读更多...
漏洞发现之操作系统

漏洞发现之操作系统

漏洞发现之操作系统1.系统漏洞1.1.系统漏洞介绍1.2.系统漏洞危害1.3.系统漏洞防范2.名词介绍2.1.CVSS2.2.CVE2.3.POC/EXP3.探针3.1.探针介绍3.2.探针工具介绍3.3.Goby3.3.1.Goby介绍3.3.2.下载地址3.3.3.Goby使用3.3.3.1.切换中英文3.3.3.2.建立扫描任务3.3.3.3.资产内容3.3.3.…
阅读更多...
深入理解 FilterChainProxy【源码篇】

深入理解 FilterChainProxy【源码篇】

目录FilterChainProxy源码分析FilterChainProxy 源码-全局属性doFilter 方法doFilterInternal 方法VirtualFilterChain最后RequestRejectedHandler引用FilterChainProxy 在一个 Web 项目中&#xff0c;请求流程大概如下图所示&#xff1a; 请求从客户端发起&#xff08;例如浏…
阅读更多...
TechG年度科技行业盛会来袭，深兰科技展台亮点抢先看！

TechG年度科技行业盛会来袭，深兰科技展台亮点抢先看！

2022年12月29日——31日&#xff0c;科技行业盛会「上海国际消费电子技术展(TechG)将在南京举办&#xff0c;深兰科技机器人产业集团将携人工智能机器人产品“家族”亮相展会&#xff0c;全面展示先进的人工智能机器人技术&#xff0c;呈现安全、高效、新潮的机器人应用场景。 …
阅读更多...
D. Lucky Chains edu139 div2

D. Lucky Chains edu139 div2

Problem - D - Codeforces 题意是给你a和b&#xff0c;要求__gcd(ak,bk)1的k最多可以增加多少个1 分析&#xff1a; 遇到这种的最大公约数的问题&#xff0c;有很大概率都是推公式&#xff0c;以及使用筛法去把所有的质数筛出来利用质因子去缩短时间 这题就是一个推公式的题…
阅读更多...
【UE4 第一人称射击游戏】11-武器跟随鼠标移动并添加开火音效

【UE4 第一人称射击游戏】11-武器跟随鼠标移动并添加开火音效

上一篇&#xff1a; 【UE4 第一人称射击游戏】10-添加冲刺功能 本篇效果&#xff1a; 步骤&#xff1a; 1.打开“SWAT_AnimBP”&#xff0c;添加3个“变换&#xff08;修改&#xff09;骨骼”节点 选中第一个“变换&#xff08;修改&#xff09;骨骼”节点&#xff0c;在细节…
阅读更多...
JAVA——把一批压缩文件中存放的部分数据进行处理（替换）

JAVA——把一批压缩文件中存放的部分数据进行处理（替换）

JAVA——把一批压缩文件中存放的部分数据进行处理&#xff08;替换&#xff09;一、需求二、分析三、具体实现1.解压压缩文件2.读取解压后的文件并且按照一定逻辑处理3.把文件压缩存储4.方法的调用5.需要添加的依赖四、执行结果五、用到的工具类六、可以改进的地方1.文件处理完…
阅读更多...
OpenText Exceed TurboX 客户案例——SMS 集团

OpenText Exceed TurboX 客户案例——SMS 集团

SMS 集团通过 OpenText 提高工程师的工作效率。OpenText Exceed TurboX 帮助该制造商提高生产力和可靠性、降低成本并实现全球协作。 SMS集团存在的挑战 需要一个可以在全球范围内轻松访问的解决方案&#xff1b;需要一个系统&#xff0c;能够无缝运行图形要求苛刻的基于服务…
阅读更多...
Git知识型整理

Git知识型整理

目的 了解Git&#xff0c; 以及工作原理&#xff0c; 能更好让自己解决在仓库中遇到的各种问题。 git 什么是git 分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本管理。很多版本管理工具如&#xff1a;sourcetree, gitLab, tortoise等等&#…
阅读更多...
贵金属软件MT4好不好用？MT4软件有什么优势特点？

贵金属软件MT4好不好用？MT4软件有什么优势特点？

如今的贵金属市场还是比较大的&#xff0c;有许多投资者都希望可以在里面赚一分钱&#xff0c;其实在市场变得很大的时候&#xff0c;我们更应该小心一点。因为如今市场当中能够选择的软件实在是太多了&#xff0c;我们可以查看一下哪一个软件比较适合投资&#xff0c;在挑选的…
阅读更多...
1、初识C语言---“hello world”

1、初识C语言---“hello world”

文章目录1、什么是C语言呢?2、第一个C语言程序3、数据类型4、变量与常量4.1变量的定义方法4.2变量的命名规则4.3变量的使用4.4变量的作用域与生命周期4.5常量5.字符串转义字符注释5.1字符串5.2转义字符5.3注释1、什么是C语言呢? C语言是一门面向过程的、抽象化的通用程序设计…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023