React Native相关调研总结

一.概要

React Native - 使用React开发世界一流的原生应用;

使用JavaScript和React(对JS有一定扩展)作为开发语言;

React Native专注于夸平台的开发效率,一次学习,跨平台应用(支持安卓和iOS)。

二.集成步骤

1.前往https://nodejs.org/en/下载node.js的pkg并进行安装

2.前往https://github.com/facebook/react-native下载最新版React Native(0.31)

3.解压并执行npm install命令

4.新建Xcode工程,在工程中按照需引入React Native的库(存在于Libraries目录)

5.完成React Native集成

三.对App体积的影响

1.包含模拟器和真机版本的静态库体积总共约30M

2.生成AppDemo只使用基本的类,ipa大小是1.7M

四.性能

官方宣称有媲美原生代码的性能,但是有网友提出React Native的性能并不理想,在页面层级到达5的时候,就要进行代码优化了。

五.动态升级方案

React Native本身并没有动态升级相关的管理类,但由于React Native使用Javascript进行构架,使得动态升级变的很方便;

关键步骤为:

1. 检查某页面对应JS是否有更新

2. 如果有更新,Native代码则进行下载

3. 下载完毕后,覆盖老版本JS

4. 重新从JS初始化RCTRootView,并加入到界面中

5. 完成升级

六.大模块升级开发成本

目前来看,React Native中提供基础的UI控件、动画、HTTP/HTTPS请求、socket、持久化等组件,理论上来讲一个模块或界面包含的所有内容,都可以使用React Native书写并完成升级。

相关的工作量包括:

  1. 使用JS开发React Native
  2. React Native与Native代码结合
  3. 跨平台、性能等方面的测试
  4. 自动升级功能的测试

七.对安卓的支持程度

React Native支持Android4.1及以上,iOS7.0及以上系统

八.使用难度

1.需要有JS语言基础

2.需要对React有基本概念,如JSX、components、state和props

3.对于一个JS工程师,门槛是比较低的

九.总结

 优势:

1. 一定程度的跨平台,一些组件在不同平台还是有着细微差异;

2. 提供了相对丰富的组件,包括UI控件、动画、HTTP/HTTPS请求、socket、持久化等等组件;

3. 有相对成熟的升级方案;

4. 对于APP体积影响不大。

 劣势:

1. React Native并不像JSPatch、WaxPatch等提供脚本语言到Native代码的一对一的映射关系,它只是提供了一系列组件,在构建复杂界面时会存在一些困难;

2. 性能方面不如Native代码,在多层页面叠加时可能会出现明显性能问题;

3. 需要学习JS语言。

十.参考资料

https://facebook.github.io/react-native/docs/tutorial.html

http://blog.csdn.net/linshaolie/article/details/50961955  React Native的动态更新方案

http://www.tuicool.com/articles/BJ7JbaY    用React Native实现动画

http://blog.csdn.net/u010046908/article/details/50916511  使用React Native进行HTTP请求

http://facebook.github.io/react-native/docs/integration-with-existing-apps.html 在已有native app中集成React Native页面

http://www.tuicool.com/articles/biUNriA    React Native性能相关

 

ReactNative调研结果的更多相关文章

  1. reactnative调研

    /**   * This function parses the exported methods inside RCTBridgeModules and   * generates an array ...

  2. React-Native转小程序调研报告:Taro & Alita

    一. 我们的要求 期望的要求 基于React语法,将RN项目转化为小程序项目 该小程序能同时在 微信小程序 和 支付宝小程序这两个平台运行 底线要求 底线是能转成微信小程序,因为目前来说,因为微信先发 ...

  3. react-native技术调研:react-native是什么?

    如有疏漏错误,还望指正.转载不忘加上>>原链接<<哦~ react-native是什么? react-native原理 从字面意思上来看,react-native由单词reac ...

  4. 在 ReactNative 的 App 中,集成 Bugly 你会遇到的一些坑

    一.前言 最近开新项目,准备尝试一下 ReactNative,所以前期做了一些调研工作,ReactNative 的优点非常的明显,可以做到跨平台,除了少部分 UI 效果可能需要对不同的平台进行单独适配 ...

  5. react-native中使用Echarts,自己使用WebView封装Echarts经验

    1.工作中遇到的问题 我们在使用react-native肯定遇到过各种奇葩的问题,比如引入Echarts时候莫名报错,但是Echarts官网明显告诉我们可以懒加载的,这是因为基本上js大部分原生的组件 ...

  6. React-Native WebView动态加载字体

    背景 使用react-native构建的iOS/Android双端APP,通过WebView加载本地页面,需要根据服务器提供的字体列表实现下载和动态加载. 本地字体检查 有些字体手机操作系统已经提供了 ...

  7. CMS模板应用调研问卷

    截止目前,已经有数十家网站与我们合作,进行了MIP化改造,在搜索结果页也能看到"闪电标"的出现.除了改造方面的问题,MIP项目组被问到最多的就是:我用了wordpress,我用了织 ...

  8. ReactNative入门 —— 动画篇(上)

    在不使用任何RN动画相关API的时候,我们会想到一种非常粗暴的方式来实现我们希望的动画效果——通过修改state来不断得改变视图上的样式. 我们来个简单的示例: var AwesomeProject ...

  9. ReactNative入门(安卓)——API(下)

    LayoutAnimation - layout动画 当布局发生改变时的动画模块,它有两个方法: 1. 最常用的方法是 LayoutAnimation.configureNext(conf<Ob ...

随机推荐

  1. Python - 调试Python代码的方法

    调试(debug) 将可疑环节的变量逐步打印出来,从而检查哪里是否有错. 让程序一部分一部分地运行起来.从核心功能开始,写一点,运行一点,再修改一点. 利用工具,例如一些IDE中的调试功能,提高调试效 ...

  2. TypeScript基础类型,类实例和函数类型声明

    TypeScript(TS)是微软研发的编程语言,是JavaScript的超集,也就是在JavaScript的基础上添加了一些特性.其中之一就是类型声明. 一.基础类型 TS的基础类型有 Boolea ...

  3. 字符串(string)的常用语法和常用函数

    在python中,加了引号(单引号.双引号.三引号)的字符就是字符串类型,python并没有字符类型. 字符串也是很常用的数据类型,这里介绍一些用的较多的语法和方法,直接以代码示例展示. str = ...

  4. mysql 开发进阶篇系列 1 SQL优化(show status命令)

    一.概述 随着上线后,数据越来越多,很多sql语句开始显露出性能问题,本章介绍在mysql中优化sql语句的方法.  1.  通过show status 命令了解各种sql的执行频率 通过show [ ...

  5. w7 python35 输出中文乱码解决

    1.乱码纷争在python自带的控制台正常 但是cmd就跪了,用的vs code也是同样问题,不想以前学习python27那么单纯,前面加个#UTF就可以了 网上寻求解决办法 import io,sy ...

  6. springboot情操陶冶-@Conditional和@AutoConfigureAfter注解解析

    承接前文springboot情操陶冶-@Configuration注解解析,本文将在前文的基础上阐述@AutoConfigureAfter和@Conditional注解的作用与解析 1.@Condit ...

  7. ASP.NET-FineUI开发实践-18

    Grid编辑下垃级联 看了看专业版的例子,分为以下几步,都是前端的 1.编辑父下拉框后,重置子下拉框 2.编辑子下垃框前,通过父下垃框数据得到下垃项,然后绑定数据 所以这里要截取Grid的两个事件,编 ...

  8. 【Vue.js】基于vue的实时搜索,在结果中高亮显示关键词

    一.搜素效果如下: 二.核心 1)利用oninput属性来触发搜素功能 2)利用RegExp来对字符串来全局匹配关键字,利用replace方法来对匹配的关键字进行嵌入高亮的<span class ...

  9. python中的模块和包

    模块 一 什么是模块 模块就是一组功能的集合体,可以通过导入模块来复用模块的功能. 比如我在同一个文件夹定义两个.py文件,分别命名为A.py和B.py,那么可以通过在A文件里通过import B来使 ...

  10. VS2017 启动调试出现 无法启动程序“http://localhost:15613” 操作在当前状态中是非法的。 同时附加进程也是错误的解决方法

    第一次发表这样的博客,不会如何的排版,还有很多的不懂,大神勿喷哈! 同时是给自己做的一次记录,已方便后面可能会同样出现该问题后不用像无头苍蝇一样到处百度乱找 VS2017 启动调试出现  无法启动程序 ...