ReactNative与NativeScript对比报告

我就是我 2022-06-12 00:46 167阅读 0赞

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

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

# 页面结构 #

NS一个页面的目录结构：

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

# 对比报告 #

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