react native 是由Facebook推出,基于JavaScript框架和React库来提高多平台开发效率的一门语言。很好地填补了跨平台开发的空缺,推出之后也是收到很多开发者的关注,目前使用的就是客户端开发者跟前端开发者居多。接下来我们将会以更新一系列的react native文章,从认识到上手到立项到发布到跑路【坏笑脸】,因为本人是前端开发,所以会以前端开发的视角来解析react native,在使用方面也是会重点以前端开发为主,结合ios与安装的混合开发来实现一个完善的app。
看透react native
react native第一次进入公众的视野是在2015年1月的react.js Conf上(想起我是在2017年9月分接触的react native),随后在同年的5月份,Facebook宣布了react native项目在github开源。结果一天之内,就收获了5000多颗星星,简直就是当红炸子鸡,想我的github star能到5000,睡觉都能笑醒。
react native与react.js
那么react native跟react.js什么关系呢?莫不是同javascript与java的关系一样?让我们先来看下react官家给出的定义: react is a JavaScript library for building user interfaces react 是一个用于前端ui开发的javascript库。react 何其他类似的前端框架相比,比如老牌的Backbone,google的angular以及尤大大以轻量级著称的vue,react的大不同,就是提出了Virtual DOM 的设计,大大地提升了页面渲染的销量。 facebook将react的设计移植到了原生开发中,诞生了react + native结合的产物,即React Native。 简单点说它们可以用二句话概括: 1.react nativ与react 使用了相同的开发语言和相同的设计理念 2.react native 是基于移动平台,而react是基于浏览器。
react native的特点
1.Learn Once, Write Anywhere
这句话简单明了地概括了React Naitve 的最大特点和优点。只要学习了react native 这一种开发方式(这里的开发方式是包括平台,语言和开发环境),就可以开发多个不同平台的App。但是有些计算机毕业的同学是不是听着这句话很耳熟呢,因为在java中很早就又提出类似的口号:Write Once, Run Anywhere。这二句话很相似也很容易混淆。react native的意思是降低学习成本,正对不同的平台可能还需要单独开发,而java的意思是只要开发一次,就可以成功运行在不同的平台和设备上。目前react native 对安卓、ios的平台支持已经做到很好,在之后可能还会支持window、Tizen等更多的移动平台。而且React Native的大多数组件是可以在多个平台复用,所以学习了React Native之后,完全可以胜任多个平台的开发任何,且不需要很高的额外学习成本,大大降低了开发成本。
简单易学的开发语言
javascript不解释
接近原生应用的性能和体验
React Native 前二个优点,Hybrid App开发其实也同样地具备,但是混合应用的开发方式在实际开发中存在着性能和提样的先天不足,因为混合应用是在移动浏览器里面嵌入html页面,原生平台的性能优势展示就受到了限制。虽然混合应用也一直在优化与提高,但是目前阶段还是无法与原生应用相媲美。而React Native虽然是用javascript语言开发,而且使用跟混合应用也很类似,但是其实React Native的实现机制却完全不同,它的底层是以及原生平台,所以React Native在性能与体验上与原生应用可以达到大致一体的效果。对用户来说,体验可以做到无差别。
完善的生态系统
这个就不用解释了 放几个实用的地址: React Native官网 React Native中文网 掘金客户端React Native模仿版 React Native学习资料汇总 js.coach React Native开源库检索网站
搭建React Native 开发环境
安装JDK与AS SDK Tools
JSDK从JDK官网下载安装即可
安装Xcode
安装Node.js
安装React Native命令行工具
npm install -g react-native-cli
或者
cnpm install -g react-native-cli
安装之后,运行react native -v检查是否安装成功 不知道这么讲是不是太简单了,后期如果有需要还是出一个具体的安装步骤,有截图,有安装结果的,其实我自己在搭建环境的过程中也有遇到一些问题,现在想起来,觉得不足为提。但是确实是很容易遇到的,并且React Native的环境搭建算是我遇到的比较复杂的环境搭建了,找个时间把电脑的环境都清了,重新搭建一次,遇到的问题也列出来,希望能对入门的朋友们优点帮助吧。
创建项目
react-native init myRN
创建一个名为myRN的项目,创建成功后打开项目目录我们来看下。 其中:
- tests 工程的单元测试文件夹
- android Android工程文件夹
- ios ios工程文件夹
- node_modules 存放依赖库
- index.android.js Android App 入口文件
- index.ios.js IOS App 入口文件 package.json 工程配置文件,前端人员都懂得它是干嘛的
对于前端开发来说,我们的安卓与ios的访问模块自然都是一样的,所以这边一个省力的方法建议大家,可以再建一个index.js,原生入口文件再访问这个文件即可,不用一个模块要写入二个文件中。 未完待续。。。