美文网首页
Cordova、Flutter、Reactnative项目、原生

Cordova、Flutter、Reactnative项目、原生

作者: 喜剧收尾_XWX | 来源:发表于2020-08-18 08:22 被阅读0次

    一、基本对比

    特点 原生 Cordova RN Flutter
    发布时间 2014 2015 2017
    维护者 Adobe(奥多比) FaceBook Google
    语言 js js dart
    代码产物 www文件夹(网页相关资源) jsBundle 二进制文件
    支持平台 Android、IOS Android、IOS、(PC) Android、IOS、(Web/PC)
    界面顺滑度 丝般顺滑 丝般顺滑 丝般顺滑 ,不过iOS风格组件较少,写出的页面太像安卓
    开发成本 高,不支持跨平台 低,只要会前端就能开发 较低,有前端基础学下React 一般,需学习dart语言
    运行速度 贼高 相比原生略慢 几乎可以达到原生性能
    使用代表 微信 海关门户 京东 咸鱼

    二、优缺点对比

    1.原生

    • 优点
    1.运行效率高
    
    • 缺点
    1.不支持跨平台开发效率低
    2.支持热更新应用上架APPStore被拒风险
    

    2.Cordova

    • 优点
    1.开发成本低,只要会前端开发就能开Cordova页面
    
    
    • 缺点
    1.开发出来的界面就是网页,特别不流畅
    

    3.RN

    • 优点
    1.开发成本低 Learn once, write anywhere
    2.开发出来的界面更接近原生
    3.第三方插件丰富
    
    • 缺点
    1.对原生安卓支持不是很好。常常要写支持安卓平台的代码
    2. 编辑器不是很好用,调试需要网页调试,让我一个原生开发者无法接受
    

    4.Flutter

    • 优点
    1.写出来的页面运行效率几乎和原生无差别
    2.谷歌亲儿子,Android studio编辑器非常好用
    3.对安卓原生支持非常好
    
    • 缺点
    1.iOS风格组件太少了,界面写出来大多安卓风格,不太习惯(也可能是iOS开发的偏见)
    2.第三方插件非常丰富。
    

    三、实现原理

    1. RN
    • React Native 是一套 UI 框架,默认情况下 React Native 会在 Activity 下加载 JS 文件,然后运行在 JavaScriptCore 中解析 Bundle 文件布局,最终堆叠出一系列的原生控件进行渲染。
    • <View> 标签对应 ViewGroup/UIView<ScrollView> 标签对应 ScrollView/UIScrollView<Image> 标签对应 ImageView/UIImageView

    2.flutter

    • Flutter 中绝大部分的 Widget 都与平台无关, 开发者基于 Framework 开发 App ,而 Framework 运行在 Engine 之上,由 Engine 进行适配和跨平台支持。这个跨平台的支持过程,其实就是将 Flutter UI 中的 Widget “数据化” ,然后通过 Engine 上的 Skia 直接绘制到屏幕上 。

    相关文章

      网友评论

          本文标题:Cordova、Flutter、Reactnative项目、原生

          本文链接:https://www.haomeiwen.com/subject/botcjktx.html