react native 包学不包会系列--认识react native

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，原生入口文件再访问这个文件便可，不用一个模块要写入二个文件中。 未完待续。。。