背景

随着各种技术的发展，目前市场有各种形式的App，当前主要如下几类：

. Web App（SUI，MUI，ionic等框架）

.Hybrid App （新闻类等）

.Native App （展业家）

.React Native （竞品：Weex等）

优缺点：http://www.woshipm.com/pd/123646.html

react简介

React Native于2015年9月15日由facebook发布，发布首周在github（https://github.com/facebook/react-native）就超过了5000星，主要使命是为父出征，与 Apple 和Google抗衡，为开发者带去一套跨平台、动态更新的Java框架，主要使用js和React开发跨平台移动应用。口号是：Learnonce, write anywhere。在试图推翻 Android 和 iOS压制的同时，还提携了一把自家兄弟：React。

RN优点：

1.跨平台，同时兼容安卓和iOS

2.热修复（iOS上已被苹果干掉）

3.开发效率高，维护成本低

4.无限接近原生的体验

RN缺点：

1.新事物，坑多，不够完善

2.listview不能复用，效率低

3.iOS7以上，安卓4.1以上

环境搭建

一.准备工作

1.1 Homebrew

Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。

/usr/bin/ruby -e "$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"

译注：在Max OS X 10.11（ElCapitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的许可权问题。可以使用下面的命令修复：

sudo chown -R `whoami` /usr/local

1.2 Node

使用Homebrew来安装Node.js.

React Native需要NodeJS 4.0或更高版本。

brew install node

安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。

npm config set registry https://registry.npm.taobao.org--global

npm config set disturl https://npm.taobao.org/dist --global

1.3 WatchMan(选装)

该插件用于监控bug文件和文件变化，并且可以触发指定操作

brew install watchman

1.4 Flow(选装)

flow是一个JS的静态类型检查器，以方便找出代码中可能存在的类型错误

brew install flow

二.React Native安装

2.1 安装RN

npm install -g react-native-cli

创建应用

1、创建一个工作空间，然后打开终端进入到该目录

cd /Users/{user}/Documents/ReactNative/

2、运行React Native的初始化命令，创建一个工程HelloWorld

react-native init HelloWorld

3、运行工程

先进入到我们创建工程目录里面

cd /Users/{user}/Documents/ReactNative/HelloWorld

之后运行程序，第一次运行会比较慢，他会下载运行所依赖的库

react-native run-android 或 react-native run-ios

生命周期

getDefaultProps：在组件创建之前，会先调用getDefaultProps()，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并载入候，首先调用getInitialState()，来初始化组件的状态。

getInitalState:组件示例创建的时候调用的第一个函数。主要用于初始化state。注意：为了在使用中不出现空值，建议初始化state的时候尽可能给每一个可能用到的值都赋一个初始值。

componentWillMount：在render前，getInitalState之后调用。仅调用一次，可以用于改变state操作。

render：组件渲染函数，会返回一个VirtualDOM，只允许返回一个最外层容器组件。render函数尽量保持纯净，只渲染组件，不修改状态，不执行副操作（比如计时器）。

componentDidMount:在render渲染之后，React会根据VirtualDOM来生成真实DOM，生成完毕后会调用该函数。在浏览器端（React），我们可以通过this.getDOMNode()来拿到相应的DOM节点。然而我们在RN中并用不到，在RN中主要在该函数中执行网络请求，定时器开启等相关操作

引用第三方插件

1.cd 到项目根目录

2.npm i react-native-tab-navigator --save(注：react-native-tab-navigator为插件名字)