最近一段时间在学习和实践React Native，做一些有趣有用总结和大家分享。这个系列文章可以在这里找到。

认识React Native

React Native是Facebook出品的基于Javscript和React的移动应用开发框架。
自2013年就开始开发，Facebook在2015年3月26日的F8大会上开源。
想认识React Native，必须要先来认识一下比它更早、更牛的框架React。同样是Facebook出品，早在2013年5月就开源的一套Javascript MVC框架，因此网上的介绍、实践也更多，中文介绍比较好的如：阮一峰的React 入门实例教程、InfoQ的颠覆式前端UI开发框架：React，相比传统型的前端开发，React开辟了一个相当另类的途径，引入虚拟DOM（Virtual DOM）、组件化等概念，实现了前端界面的高效率高性能开发。
如果说React是一整套前后端通吃的 Web App 解决方案，那么其衍生的 React Native 则有着更为宏伟的目标 —— 一套适用于各个移动端开发平台（iOS、Android、WinPhone etc.）的 Native App 解决方案，这是一项前人都没有完美解决的事情，也许 React Native 的出现能够给我们答案。

为什么需要React Native？

这里先说一些我个人的看法，随着移动互联网的继续发展，移动应用的规模会越来越大、越来越复杂，Hybird App（一部分用Native实现，一部分用Web实现）是大势所趋。因为在这种复杂App中必然有一部分的产品功能是相对稳定的，利用Native得到最好的性能和交互效果；而另一部分产品功能需要动态变化，利用Web开发技术舍弃部分性能和交互效果换取产品形态的动态更新。。而React Native作为可能是目前最好的Hybird App实现技术值得我们深入研究。

至于React Native是否能最终取代Native我觉得讨论起来并没有太大意义，新技术出现的目的从来都不是要终结现有技术，而是对现有技术的优化补充。
React Native的设计理念是：既拥有Native的用户体验，又保留React的开发效率。React Native和以往的Hybird技术方案最本质的不同是它完全抛弃了WebView，而直接基于JavascriptCore去处理页面渲染和业务逻辑，这就使得React开发所具有的优点都可以移植到移动开发上来。
再来说说跨平台，React Native把自己的开发模式称作Learn once, write everywhere，而没有提到run everywhere，也就是说React Native这项技术可以用在多个平台上，但不是用React Native编写同一套程序运行在不同平台上，毕竟iOS、Android或者其他平台还是有一定差异。

环境搭建

React Native的开发系统环境官方推荐Mac OSX，安卓开发时用到Windows和Linux支持请看这里。
环境搭建过程如下：

Homebrew：用于安装watchman和flow；在Terminal中运行：
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
homebrew安装前推荐检查安装包的更新，运行：
brew update && brew upgrade
Node.js开发环境：

nvm：node.js的版本管理器，React Native要求node.js版本在4.0以上；安装最新版本的node.js：
nvm install node && nvm alias default node
也可以指定node.js的版本，然后运行node -v检查是否安装成功。
npm：nvm安装之后，包管理器（类似于ruby的gems）也自动安装了。5.0以后的node.js默认使用npm3，根据React Native官方的说法推荐改成npm2速度会快很多，运行npm install -g npm@2。

watchman：监听文件变化的服务，必须安装；
brew install watchman
flow：可选，brew install flow。

准备开始

环境搭建完成后，让我们先来初始化一个React Native项目：

$ npm install -g react-native-cli
$ react-native init AwosomeProject

搭建好的项目目录结构如下：

项目名为AwosomeProject，和项目相关的代码文件存储在AwosomeProject目录下:

ios: iOS项目相关代码，就是普通iOS开发中在Xcode运行的一坨东西；
android：同理android项目相关代码；
index.ios.js: ios平台加载的JS脚本；
index.android.js：android平台加载的JS脚本；
package.json：把当前项目作为npm package的配置文件；内容如下：

{
"name": "AwosomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start"
},
"dependencies": {
"react-native": "^0.15.0"
}
}

进入ios/目录：

用Xcode打开AwosomeProject.xcodeproj，编译运行，React Native会通过node.js启动一个本地server，用于调试过程中访问本地js资源。
在模拟器运行效果如下：