ionic react-native和native开发移动app到底那个好
刘骏祥
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双平台高手。
移动端开发如何选型？这里介绍一下我眼中的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双平台高手。
开发成本高
类似资料：