原生/RN/Flutter选型

已于 2022-05-19 09:00:19 修改
阅读量1.3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： android 技术选型 文章标签： react native javascript flutter android
于 2022-05-16 15:17:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40237238/article/details/124795517
本文对比了React Native (RN)、Flutter和原生Android在实际业务需求、技术路线、性能测试方面的优缺点。RN凭借其跨平台、热修复、丰富的第三方库和前端资源，成为适合当前业务场景的选择，尽管存在性能问题，但有活跃的社区支持。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、实际业务需求

1、首页活动板块灵活增删/弹窗提示

2、修复小bug

3、部分灵活页面（产品未定）

二、三种技术路线对比

FlutterRN原生
诞生时间 2017年5月2015年4月2007年11月
底层实现通过Dart虚拟机编译成机器码Virtual Dom映射到原生View，通过ART虚拟机编译成机器码通过ART虚拟机编译成机器码
绘制引擎SkiaJS V8+Skia/OpenGL ESSkia/OpenGL ES
使用语言DartJS + Java/KotlinJava/Kotlin
性能Skia加工成GPU数据，交给OpenGL渲染多一层桥接层负责解析JS代码和代码互调，但JSBridge会降低部分性并影响动画速度通过 Java 虚拟机绘制
上手难度一般难/
社区丰富，谷歌力捧活跃，FaceBook支持庞大，谷歌支持
支持热更支持热更新（代码预埋未开放，可自行实现）支持热更新可热更新（成熟框架各有优劣）
第三方库较少较多超多

如图所示，RN是最贴合本系统业务场景的技术：

1、相比仅支持Android且需要自实现热更的Flutter，RN本身就支持IOS和Android热修复功能

2、一套JS代码，多端使用，减轻原生开发工作量

3、保证多端界面样式完全适配

4、较多的第三方库支持，开发更便捷

5、本公司前端较多

三、性能测试（在此分析的是渠道收集的信息，没有进行过真实实验）

        测试环境：分别用Flutter、RN、原生开发三个项目，只有一个列表页面，10000条数据，在三款低中高端（魅蓝Metal/魅族Pro5/华为P20Pro）机型中测试

 

 

FlutterRN原生
APK大小5.5M6.6M1.4M
启动时间

冷启动319ms

热启动152ms

冷启动243ms

热启动71ms

冷启动181ms

热启动74.8ms

内存/cpu

魅蓝Metal

初始：30M

滑动5000稳定32M

CPU：22%

初始：38M

滑动5000条稳定60M

CPU：45%

初始：7.6M

滑动5000条稳定12M,

CPU：10%

内存/cpu

魅族Pro5

初始：85M

滑动5000条稳定110M

CPU：12%

初始：56M

滑动5000条稳定104M

CPU：22%

初始：29.5M

滑动5000条稳定42M

CPU：7%

内存/cpu

华为P20Pro

初始：99M

滑动5000条稳定110M

CPU：12%

初始：63M

滑动5000条稳定80M

CPU：22%

初始：25M

滑动5000条稳定32M

CPU：8%

主观感受无卡顿滚动100条之后有卡顿丝滑般

如图所示，

1、包体积：原生最小，Flutter和RN差不多，由于Flutter和RN需要引入一些C++依赖库，所以包提交较大

2、启动时间：Flutter > RN ≈ 原生

3、内存占用：原生最小。高端手机上，Flutter > RN；低端机上，Flutter < RN，但RN内存占用不稳定，初始化页面占用较高，之后回落

4、CPU占用：RN明显高于Flutter和原生，会导致手机性能降低，耗电量增加，发热等

5、主观体验：原生最流畅顺滑，其次是Flutter，最后是RN

四、总结

        综上所述，虽然RN的确存在一些性能上的缺陷（比如官方提供的无限列表组件等），但现已有许多较为成熟的解决方案。没有最好的技术，只有最合适的技术。对于目前商城的实际业务场景，除了基本的组件化开发，还需要支持热更，RN对双端开发热更新较为友好，且一处开发的前端JS代码，多端使用，增加了代码的复用性，也减轻了原生开发人员的工作量。尽管RN还存在很多其他的坑，但有较为活跃的社区和生态圈做支持，可在开发过程中逐步填坑，因此本次调研最终结果是选择RN作为移动端的开发框架。

前端跨平台开发：React Native vs Flutter
小白菜的博客
06-01 991
想象一下：你要开一家奶茶店，需要同时做iOS和安卓的点单APP。如果用传统“原生开发”（iOS用Swift/Objective-C，安卓用Kotlin/Java），相当于请了两支装修队——一队用木头，一队用砖块，不仅成本翻倍，后期改个菜单样式还要分别沟通，麻烦得很！跨平台开发的目标就是“一支装修队，两种材料都能搞定”，让开发者用一套代码生成iOS和安卓的APP，降低开发、维护成本。本文聚焦当前最主流的两大跨平台框架：React Native（Meta开发）与Flutter（Google开发）。
Android Studio跨平台开发：React Native对比Flutter
移动开发前沿的博客
05-09 837
随着移动应用市场的迅速发展，开发者对于高效、便捷的跨平台开发技术需求日益增长。Android Studio作为主流的Android开发环境，支持多种跨平台开发框架。本文旨在对React Native和Flutter这两种在Android Studio中广泛应用的跨平台开发技术进行全面对比，涵盖从核心概念、技术原理到实际应用的各个方面，帮助开发者了解它们的优缺点，从而在项目开发中做出更合适的技术选择。
移动端跨平台开发选型：Flutter、React Native 与原生开发的利弊权衡
威哥说编程
11-25 1112
Flutter：适合需要快速开发、跨平台一致性要求较高的项目，尤其适合初创团队或小型开发团队，且对于 UI 自定义和动画效果有较高需求的项目。：适合具有前端开发背景的团队，尤其是需要依赖广泛插件和较强社区支持的项目。React Native 提供了丰富的原生组件支持和良好的跨平台体验，适合构建常见功能的电商、社交类应用。原生开发：适合对性能要求极高、需要高度定制化的应用，如游戏、重度图形处理、复杂动画等场景。适用于大型企业项目或高预算项目，能够提供最佳的性能和用户体验。
RN与原生交互（一）——基本页面跳转
weixin_33920401的博客
06-13 1258
React Native(以下简称RN)开发app过程中大部分都可以在JS端完成，但是也有一些功能是需要原生端来完成的。这时RN与原生端就不可避免的需要进行交互，比如页面跳转和数据传递。本篇文章主要以RN——原生、原生——RN——原生为例来讲解如何进行基本的页面跳转操作。 关于页面跳转，我写了三个demo。这里发下地址： RNAddNative RNPushToNative NativeJump...
Android跨平台技术核心解读：Flutter vs RN vs KMP
m0_65382359的博客
06-23 627
跨平台技术没有银弹，每种方案都是在开发效率、性能体验、平台一致性等多个维度之间做出的权衡。Flutter牺牲了部分原生性，换取了极致的UI一致性和开发效率。利用了Web生态，但在性能和原生性上做了一些妥协。则完全不妥协于原生体验，将共享的重点放在了业务逻辑层。作为Android开发者，深入理解KMP可能是未来一个非常有价值的方向，因为它能让你在保持原生开发优势的同时，极大地提升逻辑复用的效率。在下一篇文章中，我们将回到原生开发，盘点一下Android生态中那些能极大提升开发效率的、流行的框架与库。
flutter 数据库_为Flutter应用选择正确的数据库
weixin_26638123的博客
08-27 4586
flutter 数据库This article was originally published here on the Codemagic blog 本文最初发布 在 Codemagic博客上 There are a lot of options out there today when it comes to databases in your application. They typic...
浅谈Android原生混合式开发架构（ReactNative，Flutter）设计
文艺范的博客
04-10 1849
混合式开发为什么能做到热重载技术，热重载原理是什么 Android原生，ReactNative，Flutter 从三大纬度（UI显示原理，状态更新机制，编译流程）看技术更新规律 1、系统设计架构 对比 Android原生、ReactNative、Flutter 三者在设计上不同的理念 UI显示流程 状态更新机制 编译流程 1）、UI显示流程 通过layout布局决定UI效...
RN （React Native）相对原生有哪些优势？
移动开发技术分享
09-04 6503
1. RN 一套代码可以跨平台使用； 2. 减少人力，节省时间；  3. 避免了Android和IOS版本发布时间不同步； 4. 开发新功能迅速； 5. 更方便的增量更新。
干货 | 携程APP Native/RN内嵌Flutter UI混合开发实践和探索
携程技术
10-28 3086
作者简介Deway，携程资深工程师，iOS客户端开发，热衷于大前端和动态化技术；Frank，携程高级工程师，关注移动端热门技术，安卓客户端开发。前言随着各种多端技术的蓬勃发展，如今的移动...
移动应用开发中的跨平台技术选型与实践：Flutter、React Native 对比分析
威哥说编程
12-01 1468
FlutterFlutter 是由 Google 推出的跨平台开发框架，基于 Dart 编程语言，旨在提供高性能、高质量的移动应用体验。Flutter 的核心特点是其拥有一个自定义的渲染引擎，可以直接绘制 UI 元素，避免了依赖原生控件，从而保证了跨平台一致性的同时，能够提供更高的灵活性和性能。主要特点：Flutter 使用 Dart 语言，通过一个代码库构建 Android 和 iOS 应用。Flutter 自带 Skia 渲染引擎，通过直接渲染 UI，确保了跨平台一致性。
rn代码与android,RN与原生通讯（安卓篇）
weixin_39818550的博客
05-26 544
明天和意外你永远都不知道哪一个先来，编程界亦是如此。例如某个已经有原生代码开发模块的项目要求用RN扩张某些功能；又例如，RN中未封装到的组件非得求助于原生代码。所以RN与原生代码通讯对于混合编程是至关重要的。为了实现两者之间的通信，facebook也提供了三种通信方式。看内容.jpgRCTDeviceEventEmitter消息机制：由Native主导控制，可以任意时刻传递Callback回调方式...
RN与Android原生交互
weixin_30266829的博客
07-31 131
前言：最开始做RN开发的时候，没有和原生打交道，结果居然把项目做出来，后来有人问我，RN页面可以跳转到Activity页面吗？我蒙了，我想了一下为什么还要调到原生页面呢？那样就不兼容andoid和ios平台了，如果都要原生页面了，那何不就用原生页面。事实上，是可以从RN页面跳转到原生页面的，鉴于有些功能不好实现，走原生这条路并不是不行的。 拿Android来说： RN可以与原生模块通信（比如：...
iOS原生界面与RN界面互调及传值
高级软件开发工程师--周玉的博客
10-25 3832
文章目录3. iOS原生与RN互调及传值3.1 RN跳转原生界面3.2 RN跳转原生界面并传值3.3 RN跳转原生界面并传值后,原生界面再回调给RN界面相关信息3.4 原生界面传值给RN页面 3. iOS原生与RN互调及传值 3.1 RN跳转原生界面 iOS端: 导入#import &amp;amp;amp;lt;React/RCTBridgeModule.h&amp;amp;amp;gt;. 需要创建一个类遵守RCTBridgeModule...
RN前端与原生模块之间通信方式总结
weixin_43194854的博客
01-20 1446
学习目标： https://blog.youkuaiyun.com/qq_25827845/article/details/52963594 学习内容： 提示：这里可以添加要学的内容 例如： 1、 搭建 Java 开发环境 2、 掌握 Java 基本语法 3、 掌握条件语句 4、 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 1、 周一至周五晚上 7 点—晚上9点 2、 周六上午 9 点-上午 11 点 3、 周日下午 3 点-下午 6 点 学习产出： 提示：这里统计学习计划的总量 例如： 1
原生安卓[Android]项目中集成RN[React Native]项目
qq_14923483的博客
03-29 1381
原生安卓Android项目中集成RNReact Native项目 说明 开发环境 集成步骤 总结原生安卓[Android]项目中集成RN[React Native]项目1.说明： 1.基于对RN技术的跨平台性及代码的简洁性我对RN产生浓厚的兴趣 2.这是我人生的第一篇博客写得不好的希望各位读者谅解 3.本人在写这篇博客的时候查阅过大量的资料，花了两天时间才彻底搞清楚在原生Android项目集成RN技
原生与RN通信
oop__qoo的专栏
08-26 447
RN与原生的通信 此文以iOS与RN通信为例实现了 1.RN给原生发消息：RN调用原生方法，传递参数 原生中导出MODULE和METHOD供RN调用 RCT_EXPORT_MODULE(PushNative) // RN跳转原生界面 RCT_EXPORT_METHOD(RNOpenChatVCWithUserInfo:(NSDictionary *)userInfo){ dispatch_async(dispatch_get_main_queue(), ^{ RootT...
RN和Flutter对比
weixin_46401812的博客
02-25 2215
RN和Flutter对比 Flutter是谷歌的移动端UI框架，可以快速在IOS和Android上面构建高质量的原生用户界面，免费开源的，是可以用于常见高性能、快平台的移动应用的框架。 1.性能方面： Flutter是基于Drt语言，所有避免了RN的那种通过桥接器与js通讯导致效率低下的问题，所有在性能方面，Flutter要比RN更高一些，会更接近原生体验 2.学习方面： Flutter是基于Da...
原生、混合、react-native应用对比分析
热门推荐
iOS_Manguoge的博客
03-12 1万+
原生开发是系统自带的app开发方式，也是大部分人最熟悉app开发的技术，如android、ios、wp。 H5开发是Html5开发的app，本质上运行在手机浏览器中的页面，一般使用app做一个壳套用浏览器运行H5的页面，由于H5的特性也有很多app使用半原生半H5的hybird app 开发模式。react-native是用react 进行原生app开发的框架，让广大开发者使用js和react开发应用，提倡组件化开发
在已经有原生的基础上呢？
最新发布
07-09
<think>我们正在讨论的是在已有原生App中集成前端框架进行混合开发。根据用户提供的引用和之前的问题，我们知道用户希望结合Uni-app、React Native等框架与现有原生应用进行混合开发。引用[1]提到Uni-app和原生App混合开发会遇到问题，并提供了解决思路；引用[2]讨论了框架开发与原生开发的权衡；引用[3]则介绍了跨平台开发的架构。 目标：将前端框架（如React Native, Uni-app, Flutter等）集成到现有的原生App（iOS/Android）中，实现部分功能由前端框架开发，部分保留原生，从而提升开发效率。 步骤概述： 1. **选择框架**：根据项目需求选择合适的前端框架（如React Native, Uni-app, Flutter等）。 2. **集成方式**：将选定的框架以库的形式集成到现有原生项目中。 3. **通信机制**：建立前端框架与原生代码之间的通信桥梁（如使用Bridge）。 4. **模块化开发**：将需要混合开发的功能模块拆分成可由前端框架开发的独立模块。 5. **构建与部署**：配置构建流程，将前端框架的代码打包并嵌入原生应用。 下面详细说明每一步： ### 1. 选择框架 根据引用[3]的跨平台开发架构，我们有以下选择： - **React Native**：通过JavaScript Bridge调用原生模块，适合已有React技术栈的团队[^3]。 - **Flutter**：使用自绘引擎，不依赖原生组件，但需要集成Flutter引擎到原生应用。 - **Uni-app**：基于Vue.js，支持多端发布，通过原生渲染引擎，适合需要同时发布到小程序和App的场景[^1]。 选择建议： - 如果项目需要快速集成且团队熟悉Vue，可选Uni-app。 - 如果追求高性能和自定义UI，可选Flutter。 - 如果已有React技术栈或需要丰富生态，可选React Native。 ### 2. 集成方式（以React Native为例） #### Android集成步骤： 1. **添加React Native依赖**：在`build.gradle`中添加： ```groovy implementation "com.facebook.react:react-native:+" ``` 2. **创建React Native组件**：编写JS组件，例如`HelloWorld.js`。 3. **在原生Activity中加载React Native组件**： ```java // 创建ReactRootView ReactRootView rootView = new ReactRootView(context); // 启动React Native应用，指定组件名 rootView.startReactApplication(reactInstanceManager, "HelloWorld", null); // 将rootView添加到原生视图 setContentView(rootView); ``` #### iOS集成步骤： 1. **安装React Native**：使用CocoaPods添加依赖： ```ruby pod 'React', :path => '../node_modules/react-native', :subspecs => [ 'Core', 'CxxBridge', 'DevSupport', 'RCTText', 'RCTNetwork', 'RCTWebSocket', ] ``` 2. **创建RCTRootView**： ```objectivec NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"HelloWorld" initialProperties:nil launchOptions:nil]; [self.view addSubview:rootView]; ``` ### 3. 通信机制 - **React Native**：使用`NativeModules`和`RCTBridgeModule`实现双向通信。 - 原生模块暴露给JS： ```java @ReactModule(name = "CustomModule") public class CustomModule extends ReactContextBaseJavaModule { @ReactMethod public void nativeMethod(String message) { // 原生逻辑 } } ``` - JS调用原生方法： ```javascript import { NativeModules } from 'react-native'; NativeModules.CustomModule.nativeMethod('Hello from JS'); ``` - **Uni-app**：通过`uni.requireNativePlugin`调用原生插件[^1]。 - **Flutter**：使用`MethodChannel`进行通信。 ### 4. 模块化开发 将应用拆分成独立模块： - 部分模块使用前端框架开发（如商品列表、用户反馈）。 - 核心模块（如支付、相机）保留原生开发。 - 通过路由机制（如React Navigation）实现前端模块间的导航，通过原生路由（如Intent、ViewController）实现跨技术栈跳转。 ### 5. 构建与部署 - **开发环境**：启动前端框架的打包服务（如React Native的Metro服务）。 - **生产环境**：将前端代码打包成离线资源（如Android的assets，iOS的main.jsbundle），避免依赖开发服务器。 ### 挑战与解决方案（引用[1]） - **问题1：资源冲突** 解决方案：规范资源命名，避免重复。 - **问题2：通信延迟** 解决方案：减少跨桥接通信次数，批量传输数据[^3]。 - **问题3：版本升级** 解决方案：锁定框架版本，逐步升级（引用[2]提到原生开发可避免框架升级问题）。 ### 总结 混合开发的核心在于**渐进式集成**： 1. 从非核心模块开始试点。 2. 建立稳定的通信桥梁。 3. 确保构建流程自动化。 通过以上步骤，您可以在原生App中高效集成前端框架，提升开发速度并保持原生性能[^1][^3]。 §§相关问题§§ 1. 如何解决React Native与原生App之间的数据同步问题？ 2. 混合开发中如何实现原生模块的热更新？ 3. Uni-app与原生App混合开发时，如何共享用户登录状态？ 4. Flutter集成到现有原生App的性能监控方法有哪些？</think>### 已有原生App集成前端框架的混合开发方案 在已有原生App（Android/iOS）中集成前端框架进行混合开发，需解决**模块通信、视图嵌套、构建集成**三大核心问题。以下是基于引用内容的实践方案： --- #### 一、技术选型与集成原理 根据引用[3]的跨平台开发架构，推荐两类方案： 1. **桥接原生型框架**（如 React Native） - **原理**：通过 JavaScript Bridge 调用原生 API，将前端组件嵌入原生视图层级 - **适用场景**：需高性能交互的模块（如动态feed流） ```mermaid graph LR A[React组件] --> B(JavaScriptCore/ Hermes引擎) B --> C[Native Bridge] C --> D[Android Java/Kotlin] C --> E[iOS Objective-C/Swift] ``` 2. **WebView容器型框架**（如 Uni-app + WebView） - **原理**：前端代码运行在 WebView 中，通过 JSBridge 与原生通信 - **适用场景**：内容展示型模块（如活动页、帮助中心） ```mermaid graph LR F[Uni-app Vue组件] --> G[WebView] G --> H{JSBridge} H --> D[原生功能调用] H --> E[原生功能调用] ``` --- #### 二、具体集成步骤（以 React Native 为例） ##### 1. **Android 集成** ```gradle // build.gradle implementation "com.facebook.react:react-native:+" // 引入RN库 ``` ```java // 在Activity中嵌入RN组件 ReactRootView rootView = new ReactRootView(this); rootView.startReactApplication( reactInstanceManager, "YourReactComponent", // RN组件名 null ); setContentView(rootView); // 替换原生布局 ``` ##### 2. **iOS 集成** ```swift // Podfile pod 'React', :path => '../node_modules/react-native' pod 'React-Core', :path => '../node_modules/react-native/' ``` ```swift // ViewController.swift let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios")! let rootView = RCTRootView( bundleURL: jsCodeLocation, moduleName: "YourReactComponent", initialProperties: nil ) view.addSubview(rootView) ``` ##### 3. **通信机制实现** - **原生 → RN**：通过 `RCTEventEmitter` 发送事件 ```java // Android端 reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) .emit("eventName", data); ``` - **RN → 原生**：通过 `NativeModules` 调用原生方法 ```javascript // RN组件 import { NativeModules } from 'react-native'; NativeModules.YourNativeModule.doSomething(params); ``` --- #### 三、关键问题解决方案（引用[1]实践） 1. **版本冲突** - 锁定框架版本（如 RN 0.68 LTS） - 通过 `gradle.properties` 强制统一依赖版本 ```properties # Android统一版本控制 reactNativeVersion=0.68.5 ``` 2. **原生功能扩展** - 开发自定义 Native Module： ```java // Android原生模块 @ReactModule(name = "CameraModule") public class CameraModule extends ReactContextBaseJavaModule { @ReactMethod public void takePhoto(Promise promise) { // 调用原生相机API } } ``` 3. **性能优化** - 引用[3]建议：减少跨桥接通信次数，批量传输数据 - 使用 `InteractionManager` 延迟非关键操作 ```javascript InteractionManager.runAfterInteractions(() => { // 耗时操作 }); ``` --- #### 四、混合开发架构设计 ```mermaid graph TD A[原生主工程] --> B{路由分发中心} B -->|原生模块| C[Java/OC代码] B -->|混合模块| D[RN/Uni-app容器] D --> E[前端业务模块] D --> F[JSBridge] F --> C ``` **优势**： - 引用[2]验证：核心功能保持原生开发，避免框架升级风险 - 动态模块使用前端框架，提升迭代速度 50%+ [^1] --- #### 五、调试与部署流程 1. **开发阶段**： - RN：启动 Metro 服务 `npm start` - Uni-app：运行 `npm run dev:app-plus` 2. **生产部署**： - 将前端代码打包成离线 bundle ```bash react-native bundle --platform android --entry-file index.js --bundle-output android/app/src/main/assets/index.bundle ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值