是时候了解React Native了
文章首发于简书,欢迎关注
随着科技的发展,手机开发也在向好的方向不停的转变。IOS和Android两大手机操作横空出世,称霸江湖。我们每开发一个手机软件最少都需要开发这两个终端。
两大操作系统都在不断的提升完善,能力越来越强大,这对于我们开发者是好事,因为用智能手机的用户越来越多。
话天下大事,分久必合,合久必分。这句话对于移动开发也是一样的。
这几年来,移动应用开发者做梦都希望有一个能跨平台的开发工具,让他们不要把同一个移动应用使用不同的开发语言写两遍。但跨平台开发工具的实现很难,直到Facebook开源了React Native.
React,React.js, React Native
要想学习React Native首先了解上面三个概念和之间的联系。
1. React 是基础框架,提供了一套基础设计实现理念,并不能直接用来开发,就好比马克思主义对于我党的作用一样。
2. React.js 是在React理念的指导下产生的专门用来开发网页的框架.与React同时出现和发展,React的相关概念都在React.js文档中。
3. React Native 是用来开发移动应用。需要用到React概念,但是不需要React.js的东西。
预备知识
- 学习React Native开发需要了解基础的JavaScript编程知识。如果有编程经验的可以通过 慕课网提供的学习页面http://www.imooc.com/learn/36 或者直接阅读ECMAScript 6入门电子版
- 最好简单了解一下Android或者IOS其中一门开发,因为React Native开发的功能偶尔还需要借助原生代码实现,大家可以看一下我写的爱上Android这本书了解下Android开发
React Native的特点
使用React Native开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率。
一次学习,随处编写
一份代码同时支持IOS和Android两个平台在历史上证明是非常困难的,所以React Native小组并没有狂妄的喊出”Write once,run anywhere”,而是提出了“Learn once,write anywhere”。使用RN可以为两个操作系统开发应用程序,但不同的平台上的代码根据平台会有一些微小的区别,但开发思路是相同的。在UI开发上,RN差不多做到了”Write once,run anywhere”。
混合开发
React Native支持混合开发,大致分为三种情况。
1. UI界面由React Native开发, 但UI事件处理由原生代码执行
2. 将原来使用的原生代码实现的UI小部件包装成React Native的自定义控件
3. 应用界面在React Native开发的界面与原生代码开发的界面间进行切换,React Native的强项就是UI开发,在混合开发中,能用React Native开发的界面,优先用React Native开发.
优缺点
RN优点很明显,
1. 可以大大节省开发成本,百分之90多界面可以通过RN开发,一份代码可以适配Android和IOS.
2. RN有独特的UI实现框架,借助组件化开发是团队规模更容易进行调整,可以快速迭代项目.
3. RN可以通过一些手段自动匹配不同屏幕大小的手机,再也不需要自己去计算视图的大小和位置.
4. RN具备高效的UI调试.
RN也有一些缺点,不过相对于优点基本上可以忽略
1. RN开发的程序内存消耗略大, 开发模式下开销大几十兆,发布后差异不大, 目前手机基本上都有2G以上的内存, 几十兆可以忽略不计了。
2. 运行速度略慢, 不可否认,原生代码比RN运行速度略快, 显示一个界面多一两毫秒吧,正常的人根本感觉不到,如果你用不经过优化的原生代码反而不如RN.
3. 安装包比原生代码安装包大,这点更可以忽略了, 现在手机什么都缺就不缺空间.
React Native开发环境搭建
React Native可以在Mac,Linux,Windows上搭建, 其中如果开发IOS,必须在Mac上搭建。具体如何搭建可以参考React Native环境搭建
学习资料
React Native 官方文档中文版
React Native中文网
ECMAScript 6入门
更多精彩请关注微信公众账号likeDev,公众账号名称:爱上Android。
是时候了解React Native了的更多相关文章
- React Native 之 Text的使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native环境配置之Windows版本搭建
接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...
- 史上最全Windows版本搭建安装React Native环境配置
史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...
- 【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...
- React Native环境搭建以及几个基础控件的使用
之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...
- React Native组件介绍
1.React Native目前已有的组件 ActivityIndicatorIOS:标准的旋转进度轮; DatePickerIOS:日期选择器: Image:图片控件: ListView:列表控件: ...
- React Native图片控件的使用
首先定义组件 import { AppRegistry, StyleSheet, Text, View, Image,} from 'react-native'; 然后将render返回中的模版增加I ...
- react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置
参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...
- windows 7下React Native环境配置
React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
随机推荐
- ES6--反引号的使用
/*动态初始退出登出框话模态框*/ /*动态的初始化退出登陆模态框 反引号ES6语法 * 为什么在使用字符串格式直接创建模态框 * 1.不能在html页面中创建模板,因为如果换一个页面就没有对应的模板 ...
- C# 基础才是重中之重~对象的生与死
为何要写 之所以写这篇文章,完全是因为学生们在实际开发中遇到的问题,一个对象占用的内存空间总不被释放,导致系统内存不断攀升,其最主要原因是我们对“对象的生与死”不清楚,或者从来没有认真去考虑过这件事, ...
- Java问题解读系列之基础相关---含继承时的执行顺序
今天来研究一下含继承.静态成员.非静态成员时Java程序的执行顺序: 一.不含继承,含有静态变量.静态代码块 创建一个子类,该类包含静态变量.静态代码块.静态方法.构造方法 /** * @create ...
- linux追加中文字库,解决imagemagick 中文乱码的问题。
Windows下的字体丰富多样,而且显示的工整.漂亮. 所以自己想把windows上的字体移到Ubuntu下来.Windows下字体库的位置为C:\Windows\fonts,这里面包含所有windo ...
- python基础--模块的查找顺序以及相对导入和绝对导入
模块:模块是一系列功能的结合体 模块的来源: 内置的模块(python解释器自带的) 第三方(开发者编写的模块) 自定义的模块(自己编写的模块) 模块的四种表现形式: 1.使用python编写的py文 ...
- free内存监控
语 法: free [-bkmotV][-s <间隔秒数>] 补充说明:free指令会显示内存的使用情况,包括实体内存,虚拟的交换文件内存,共享内存区段,以及系统核心使用的缓冲区等. 参 ...
- 如何查看MySQL执行计划呢?
覆盖索引: MySQL可以利用索引返回select列表中的字段,而不必根据索引再次读取数据文件 包含所有满足查询需要的数据的索引称为 覆盖索引(Covering Index) 如果要使用覆盖索引,一定 ...
- Javascript-选择器集合调用方法
<script type="text/javascript"> function uu(namePd) { //判断id var reId = new RegExp(/ ...
- Vue--公有组件以及组件的使用和特点
组件的作用:为了能够让功能与功能之间互不影响,使代码更加清晰整洁 1 <!DOCTYPE html> <html lang="en"> <head&g ...
- PHP配置环境中如何开启伪静态
1.在httpd.conf中引入httpd-vhosts.conf 2.在httpd.conf中开启mod_rewrite.so 3.在httpd-vhosts.conf中配置虚拟主机 AllowOv ...