搜索
查看
编辑修改
首页
UNITY
NODEJS
PYTHON
AI
GIT
PHP
GO
CEF3
JAVA
HTML
CSS
搜索
笔触狂放9
这个屌丝很懒,什么也没留下!
关注作者
热门标签
jquery
HTML
CSS
PHP
ASP
PYTHON
GO
AI
C
C++
C#
PHOTOSHOP
UNITY
iOS
android
vue
xml
爬虫
SEO
LINUX
WINDOWS
JAVA
MFC
CEF3
CAD
NODEJS
GIT
Pyppeteer
article
热门文章
1
时间序列异常检测:统计和机器学习方法介绍_java实现对时间序列数据异常检测
2
关于实例化抽象类的讨论_抽象的实例化
3
【考研线代】二. 矩阵_为什么n维列向量乘n维行向量的秩为一
4
Linux Qt5的安装与环境配置
5
Python print语句详解及实例
6
信息系统项目管理师Part13-UML_uml图设计信息管理系统
7
想成为月薪过万的软件测试工程师?快看过来!
8
第十九章 GUI 库:PyQt5
9
改进YOLO系列:通过增加小目标检测模块提升YOLOv8的小目标检测效果_yolov8修改目标检测框
10
ic卡和id卡介绍_id卡识别任务
当前位置:
article
> 正文
ionic react-native和native开发移动app到底那个好_react native uni-app ionic
作者:笔触狂放9 | 2024-08-17 14:36:18
赞
踩
react native uni-app ionic
ionic react-native和native开发移动app那个好 ?
移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比。
欢迎大家补充指正
一、 跨平台特性
ionic :
write once, run anywhere (
一次开发,随处运行,学习成本低 会html css js就可以学会
)
不涉及到系统级的开发的话, 确实是一次开发 处处运行,如果涉及到系统级API调用以及项目配置(如 ios plist文件)则需要自己手动编写cordova插件的方式达到效果(如:注册文件的打开方式),当然,网上也有可能找到可以安装的现成插件。
会html css js就可以学会 学习成本低
react-native
:Learn once, write anywhere (
一次学习,随处开发
)
不涉及到与native混编的话, 统一js 进行开发 使用jsx 语法 确实能做到各端开发,
但是需要针对iOS 和 android 开发两套代码。
native :
使用原生java objective-c 开发, 各玩各的,无法跨平台。
二、开发方式
ionic :html + angularjs + css
使用 html + angularjs 与网页开发类似,
代码只需要写一次,就可以达到跨平台效果
, 系统级的调用由cordova插件解决,封装得相当好,简单易用,特殊情况的自己动手编写插件比较难,一般没有需要手动编写代码插件的情况,网上有比 较多的插件可供下载安装,可用flexbox布局。 调用方便(比如:要用摄像头插件,只需要cordova plugin add camera,然后就可以用js调用原生摄像头)
react-native :js + css
普通UI全程js开发,
部分情况下需要使用与native混合的方式,
没有统一的UI组件
,ios组件较多,android组件较少
,
各自编写js文件的情况较多
,简单空间和逻辑层可共用,
基本上iOS和android是两套代码
,可用flexbox布局。
native :java + oc|swift
iOS android 不同语言开发 以及适配。
三、功能支持
ionic :编写cordova插件,则能达到全部支持
原生能完成的功能 ionic结合cordova都可以实现
UI交互 由Web实现,系统级的交互 由 cordova实现,目前 文件上传下载,url跳转以及文件打开方式 均已做验证可实现,cordova对系统级调用的支持比较好,涵盖了大部分系统功能,如摄像头,设备信息,电池,网络等,不排除潜在不支持的问题。
react-native :与native 混编 可达到全部支持
android高级组件可能需要自己实现,系统级的功能可通过安装第三方插件或者与native混编的方式实现 ,基本上功能能完全实现
native :全部支持
完全能实现
四、性能对比
ionic :
虽然性能一直是html5在移动端的最大问题,
但是ionic已经做得非常出色了
,在ios上基本上无法区分是否是原生app
android 通过优化基本看不出和原生差别
ionic使用
ionic-native-transitions 调用原生专场基本看不出和原生区别 (适合android ios)
android 2G内存以上的手机看不出和原生差别,性能接近原生。
android 低配置的手机添加 crosswalk 插件以后 体验较好,但是app打包偏大。程序运行内存占用较大(网络数据对比同款产品,内存占用100+M)
react-native :
基本接近原生性能
js 到 native 需要经过两层桥接,性能与原生差别不大(网络数据对比同款产品,内存占用50 M)
native:
开发者水平很重要
性能最好 (网络数据对比同款产品,内存占用30 +M)
总结:
开发水平很重要,html开发的app可能比原生的更快。主要还看开发人员的水平以及会不会优化
五、优劣对比
ionic :
优势:
ios 和 android 基本上可以共用代码,
纯web思维,开发速度快,简单方便,一次编码,到处运行,如果熟悉web开发,则开发难度较低。
文档很全,系统级支持封装较好
,所有UI组件都是有html模拟,可以统一使用。
可实现在线更新
允许加载动态加载web js
文档多,开发者多
,视频教程多 容易学习 遇到问题容易解决 技术成熟
劣势:
占用内存高一些(
不过手机内存都大了不影响
),不适合做游戏类型app, web技术无法解决一切问题,对于比较耗性能的地方无法利用native的思维实现优势互补,如高体验的交互,动画等。
react-native :
优势:
1、
虽然不能做到一处编码到处运行,但是基本上即使是
两套代码
,也是相同的jsx语法,
使用js进行开发。用户体验,高于html,开发效率较高 2、flexbox 布局 据说比native的自适应布局更加简单高效
可实现在线更新 2015.7.28 AppStore审核政策调整:允许运行于JavascriptCore的动态加载代码
更贴近原生开发
劣势:
1、(引)
对
开发人员要求较高,不是懂点web技术就行的
,当官方封装的控件、api无法满足需求时 就必然需要懂一些native的东西去扩展,扩展性仍然远远不如web,也远远不如直接写Native code。
2、 (引)
官方说得很隐晦:learn once, write anywhere。人家可没说run anywhere
。事实上,从官方的api来看SliderIOS,SwitchIOS..等等这些控件,之后势必会出现 SliderAndroid,SwitchAndroid...,
也就是很可能针对不同的平台会需要写多套代码。
3、
发展还不成熟,目前很多ui组件只有ios的实现,android的需要自己实现。
(引)从Native到Web,要做很多概念转换,势必造成双方都要妥协。比如web要用一套CSS的阉割版,Native通过css-layout拿到 最终样式再转换成native原生的表达方式(比如iOS的Constraint\origin\Center等属性),再比如动画。另外,若 Android和iOS都要做相同的封装,概念转换就更复杂 5、文档还不够完整 学习曲线偏高
4.
文档少 学习起来困难
native :
优势:
最好的体验以及功能实现。
完善成熟的开发文档以及demo。
劣势:
android开发学习曲线较高。
各个平台分开开发 很难有iOS,android双平台高手。
开发成本高
声明:
本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:
https://www.wpsshop.cn/w/笔触狂放9/article/detail/993149
推荐阅读
article
DataV
- 免费
开源
的
Vue
/
React
大屏
数据
展示
组件
库,使用简单、
效果
酷炫的前端
数据
...
最近公众号有粉丝留言说想找一款
数据
大屏
组件
,这篇文章推荐的这款还不错,
Vue
/
React
都可以用。_
datav
开...
赞
踩
article
MySQL8.4设置密码规则为
mysql
_
native
_
password
_
mysql
-
native
-...
不要添加default
_
authenticati
on
_
plugin
=
mysql
_
native
_
password
,否则my...
赞
踩
article
LLMs
之PE:大
模型
核心技术
—
提示
工程
(
Prompt
Engineering
)—拿来即用—实战应用...
本文深入探讨大
模型
核心技术
——
提示
工程
,涵盖PC、CoT、ToT、
ReACT
等多种
提示
策略的理论与实战应用,通过案例分析...
赞
踩
article
abstract
的
方法
能否
与
static
,
native
,
synchronized
连用?_在abstr...
1、
abstract
与
static
(what)
abstract
:用来声明抽象
方法
,抽象
方法
没有
方法
体,不能被直接调用...
赞
踩
article
前端三大主流框架
Vue
React
Angular
有何不同?_element
react
和 ang...
前端三大主流框架
Vue
React
Angular
比较,前端三大主流框架
Vue
React
Angular
有何不同?_e...
赞
踩
article
App前端开发
跨平台
框架
比较:
React
Native
、
Flutter
、
Xamarin
等_移动端跨平...
移动应用开发领域的
跨平台
框架
正在不断演进,为开发者提供更多选择。在本文中,我们将比较几个流行的
跨平台
框架
:
React
N...
赞
踩
article
深度解析:在
React
中
实现
类似 Vue 的
KeepAlive
组件_
react
实现
类似 v...
在 Vue 中,
keep
-
alive
是一个抽象组件,用于缓存不活动的组件实例。性能优化:避免不必要的重新渲染。状态保持:...
赞
踩
article
深入理解
React
的
useSyncExternalStore
Hook
_usesyncexte...
是
React
18 中一个非常强大
的
Hook
,特别适
用
于需要确保状态一致性
的
场景。通过本文
的
介绍和代码示例,希望大家...
赞
踩
article
解决
React
中
setInterval
无法
更新
状态
的问题:长按加速的实现_reactnati...
通过这个长按加速的例子,我们不仅解决了无法
更新
状态
的问题,还实现了一个有趣的交互效果。在实际开发中,理解
React
的...
赞
踩
article
深入理解
React
18 中的
memo
和
useCallback
:优化你的组件
性能
_useca...
通过使用
memo
和,我们可以显著减少不必要的重新渲染,从而提高
React
应用的
性能
。希望这篇文章能帮助你更好地理解和...
赞
踩
article
鸿蒙
ArkTS
实战
开发
-
Native
XComponent
组件的使用_
arkts
xcomponen...
本篇Codelab主要介绍如何使用
XComponent
组件调用NAPI来创建EGL/GLES环境,实现在主页面绘制一个正...
赞
踩
article
探索高效
交互
新维度:
React
-
smart
-
gesture
开源
库...
探索高效
交互
新维度:
React
-
smart
-
gesture
开源
库 react-
smart
-
gesture
smart
-g...
赞
踩
article
Function
Call
&
ReACT
,
Agent
应用落地的加速器--
function
call
...
探索智能体
Agent
的未来之路:
Function
Call
与
ReACT
框架的较量,谁能引领未来?_
agent
和 func...
赞
踩
article
从
分布式
存储
到
持久
卷:【
Cloud
Native
】
存储
的进化与实战策略...
本文深入探讨了云原生环境中
存储
技术所面临的挑战及其相应的解决方案。随着云计算技术的飞速发展,云原生应用已成为企业数字化转...
赞
踩
article
Android
JNI
-
Native
基本
类型
对应关系_安卓
jni
bool
类型
...
对于
JNI
-
Native
基本
类型
,对应关系如下:字符 Java
类型
C/C++
类型
V void voidZ...
赞
踩
article
移动端混合框架大比拼:
Uniapp
、
Taro
、
React
Native
和
Flutter
_unia...
Flutter
以高性能和一致的UI体验适合对UI要求高的复杂应用。今天我们将对比四个主流框架:
Uniapp
、
Taro
、R...
赞
踩
相关标签
开源
前端
vue.js
mysql
数据库
prompt
大语言模型
抽象类
java
react.js
angular.js
javascript
jquery
软件构建
软件工程
软件需求
创业创新
程序员创富