ReactNative与NativeScript对比报告
本文由 小茗同学 发表于 2016-11-02 浏览(5573)
最后修改 2016-11-25 标签:reactnative nativescript

综合这段时间对ReactNative(下称RN)和NativeScript(下称NS)的简单学习了解,分别从不同方面分析对比二者的优缺点。

页面结构

NS一个页面的目录结构:

RN的一个页面一般就是一个JS文件,样式、XML、JS全部写在一个文件里:

对比报告

ReactNative NativeScript 对比结果
与传统web开发的差异性(学习成本) 样式、布局、逻辑控制等所有代码都以JS的形式书写,使用ES6语法(虽然可以使用ES5,但是官方推荐ES6),对于没有接触过ES6的新手有一定学习成本,要求开发者最好对原生有一定了解。 与传统web开发方式非常接近,只不过把html换成了xml,样式的写法也是遵照web中css的方式,很多api也与web更接近,相比RN而言api更简单,新手更易于接受,整体而言学习成本比RN要低 NS 胜
CSS丰富程度 比较匮乏,只支持有限的几十种样式,相比web中几百种丰富高级的样式,RN在这一点显得特别不够用,就连最基本的控制元素显示与隐藏都要通过其他方式变相实现 也比较匮乏,也只支持几十种样式,NativeScript支持的CSS列表 二者都不够丰富
github star 数 react-native有39848个star(截止2016-11-03) NativeScript有8536个star(截止2016-11-03) RN胜
社区资源 比较丰富,网上N多相关学习介绍文章,有非常丰富的中文学习资源 学习资源较为匮乏,很少中文学习资料,一般只能从官网学习 RN胜
API文档丰富程度 个人觉得比较混论,doc和api混为一谈,没有专门的API文档 有专门的API文档 NS胜
是否支持按键监听 不支持,找遍全网也没找到相关方法,不过自己实现比较简单(已经实现) 也不支持,因为设计的初衷就是做移动APP的,暂时没有去尝试自己实现,所以不知道难易程度 二者都不支持
是否支持与原生混合开发 支持,可以随时打开AndroidStuido修改原生代码,甚至可以往一个现有的Android项目中添加RN的支持 所有涉及原生的功能都要以开发插件的形式增加,而且插件开发涉及原生和JS双边,暂不清楚插件开发的难易程度 RN胜
插件丰富程度 这一点与社区资源类似,由于关注的人多,所以插件也很丰富 插件相对而言没有RN丰富 RN胜
性能 HTML5 < RN < 原生,具体和原生差多少还未知,电视上测试时光标移动流畅 HTML5 < NS < 原生,具体与原生差多少也未知,由于不支持按键监听,暂未在电视上测试 由于二者的工作原理类似,都是采用JS引擎将XML翻译成原生的布局,所以估计二者性能差不多
热更新 支持,已测试成功,增量更新暂未尝试(理论上可行),热更新之后必须重启生效 支持,已测试成功,热更新之后CSS和XML可以立即生效,JS需重启生效 都支持
界面开发难易程度 对于习惯web开发的开发者而言,个人觉得比较大,想实现一个复杂点的界面需要折腾半天 和RN类似,布局开发对于前端开发者有一定的适应期 都不算容易
生成的APK体积 HelloWorld项目大约7M多 HelloWorld项目大约12M多 RN胜
最低支持Android版本 暂不清楚最低支持多少,已知支持Android4.1 最低Android4.2 RN胜
动画开发难易程度 比较麻烦,需要比较多的代码来实现 CSS即可实现动画,类似web中的@key-frames形式,对于前端开发者而言非常容易掌握 NS胜
远程调试 默认支持Chrome调试JS,但不能调试界面 暂不清楚 未知
虽然这么多人在关注,但是由于出来没多久,坑比较多,特别是Android平台相比IOS平台更多 坑也很多 都多
图片地址可否动态拼接 不可以,网络图片可以,本地非资源图片必须以类似require('../images/logo.png')的方式加载,且图片路径不能是变量和动态拼接,这一点非常坑爹 可以随意指定,可以随意拼接 NS胜
直接修改图片地址 不可以,只能通过state动态实现 可以,与web方式非常类似,直接通过var img = page.getViewById("logo")拿到图片对象,然后img.set('src', 'test.jpg')即可 NS胜