ReactNative与NativeScript对比报告

转自：http://www.cnblogs.com/liuxianan/p/react-native-and-native-script.html

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

页面结构

NS一个页面的目录结构：

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

对比报告

 ReactNativeNativeScript对比结果与传统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.2RN胜动画开发难易程度比较麻烦，需要比较多的代码来实现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胜