转载请标明出处：
http://www.jb51.cc/article/p-pllphdoz-bgy.html
本文出自:【江清清的博客】
(一)前言
FaceBook早期开源发布了React Native For IOS,终于在2015年9月15日也发布了ReactNative for Android,虽然Android版本的项目发布比较迟，但是也没有阻挡了广大开发者的热情。可以这样讲在2015年移动平台市场上有两个方向技术研究比较火，第一种为阿里，百度，腾讯，携程，360等一线互联网公司的插件化，热修改等技术，第二种就是广大开发者一直在讨论的React Native技术。前几天同我在美国的童鞋了解到，在国外现在很多创业型互联网公司都在使用React Native技术，由此可以看出该项技术的前景还是不错的。我在这边我自己就大胆预测一下吧(呵呵,勿喷哦~)：2016年将是React Native大力发展的一年。所以对于我自己来而言，2016年的主要技术方向,ReactNative是占了主角了。在接下来的很长一段时间内，我的博客会持续更新React Native的应用开发教程，欢迎大家关注以及相关交流！
刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
(二)React Native介绍
React Native For Android是伟大的互联网公司Facebook与2015年9月15日发布的，该可以让我们广大开发者使用JavaScript和React开发我们的应用，该提倡组件化开发，也就是说React Native给我们提供一个个封装好的组件让开发者来进行使用，甚至我们可以相关嵌套形成新的组件。使用React Native我们可以维护多种平台(Web,Android和IOS)的同一份业务逻辑核心代码来创建原生应用。现阶段Web APP的的体验还是无法达到Native APP的体验，所以这边fackbook更加强调的是learn once,write everywhere，应用前端我们使用js和React来开发不同平台的UI，下层核心模块编写复用的业务逻辑代码，提供应用开发效率。
React Native项目github地址:https://github.com/facebook/react-native
React Native项目官网文档:http://facebook.github.io/react-native/docs/getting-started.html
(三)React Native配置安装
特别声明:facebook官网说当前react native欢迎是需要OS X,不过我也看到了有人通过windows系统配置该环境哈~大家有兴趣可以百度搜索一下。
3.1.Homebrew安装
Homebrew是OS X不可获取的套件管理器，我们可以通过它获取并且安装很多组件,安装方式如下:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
然后通过命令行执行brew -v进行检查brew是否已经安装成功。整体截图如下:
3.2.Node.js安装,我们需要安装Node.js4.0或者更高版本,这边推荐采用Node管理器nvm来进行安装,nvm项目地址:https://github.com/creationix/nvm
第一部分:安装nvm，查看项目官网官方推送curl或者wget方式安装或者更新nvm:
第一种:curl方式:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash
第二种:wget方式:
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash
不过在使用这两种方式之前，我们可以采用brew install curl或者brew install wget来确保已经安装curl或者wget。我这边采用了第一种方式安装，具体安装截图如下:
这样我们已经安装了nvm，但是最好我们配置一下环境变量到.bash_profile文件中，具体配置如下:
最终我们通过命令行执行nvm --version检查一下nvm是否已经安装成功。
第二部分:安装Node.js，根据官网文档我们直接命令行执行如下命令即可完成完成:
nvm install node && nvm alias default node
安装截图如下:
该会进行安装Node.js最新版本，并且会给我们打个别名，方便使用。通过nvm我们可以安装多个版本的Node.js，并且可以非常轻松的选择不同的版本进行切换使用。
【注意】如果现在采用是Node5.0版本的版本，官网是推荐安装npm 2，该版本比npm 3速度更加快。在安装完Node之后，命令行运行npm install -g npm@2安装即可。
第三部分:安装watchmam，该用于监控bug文件，并且可以触发指定的操作，安装方式如下:
brew install watchman
安装截图如下:
第四部分:安装flow,flow是一个 JavaScript 的静态类型检查器，建议安装它，以方便找出代码中可能存在的类型错误，官网:http://www.flowtype.org/ 具体命令为:brew install flow
安装截图如下:
3.3.原生开发环境安装:
针对iOS开发，我们只需要安装Xcode7.0或者7.0以后版本，该可以通过AppStore进行下载安装
针对Android开发，Android环境配置网上非常多了，我相应看这篇文章的朋友电脑上面基本都有Android开发环境的了~针对安装详细(点击进入参考文章)
3.4.React Native安装
现在就是最后一步，也是最激动人心的时刻到了，我们使用命令行运行如下命令安装React Native:
npm install -greact-native-cli
安装截图如下:
经过以上的四个大步骤我们基本完成React Native从基本环境的搭建工作，下面我们来进行一个实例演示React Native项目的效果。
(四)React Native第一个应用(AwesomeProject)
经过以上的四个大步骤我们基本完成React Native从基本环境的搭建工作，下面我们来进行一个实例演示React Native项目的效果。ReactNative第一个AwesomeProject，就不是HelloWorld啦。
首先执行如下命令,生成一个工程:
react-native init AwesomeProject
运行截图如下:
目录结构如下:
我们仔细看上面的目录，会发现该该生成android和ios两个平台的原生项目，大家有兴趣可以打开android和ios目录看一下，里边就是一个Android Studio和Xcode创建的项目。其中index.android.js和index.ios.js文件为Android和IOS的空壳应用文件。另外还有一个node_modules文件夹，该为Node.js存放和管理npm包得，也包含React Native框架文件。
查看项目部分代码:index.android.js如下:
4.1.运行iOS 应用:
①.命令行执行cd AwesomeProject,路径切换到项目主目录
②.点击ios/AwesomeProkect.xcodeproj进行运行Xocde
③.使用编辑器进行打开index.ios.js进行相关修改，然后运行应用即可。
4.2.运行Android应用:
①.命令行执行cd AwesomeProject,路径切换到项目主目录
②.命令行执行react-native run-android进行加载运行android 应用。
③.同样可以使用编辑器进行打开和修改index.android.js文件，接着通过菜单按钮选择ReloadJS来进行刷新修改
运行截图如下:
这些步骤，命令执行完之后，那么我们第一个应用也完美运行啦，具体看如下效果！
(五)已存在React Native项目添加Android版本
因为React Native的Android版本的发布要晚于iOS版本，所以有很多接触React Native比较早的应用可能只有iOS版本，我们可以进行如下的操作，给添加Android版本:
①.修改package.json文件来更新react-native到最新版本
②.运行npm install命令
③.最后执行以下react-native android命令即可
(六)最后总结
今天我们从初始开始，安装各种工具以及命令，完成了React Native的基础环境的搭建，并且成功运行第一个React Native for Android的应用。下一篇我们对推荐IDE(Atom)以及相关插件的安装配置讲解。敬请期待~
尊重原创，转载请注明：From Sky丶清（http://blog.csdn.net/developer_jiangqq） 侵权必究！
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)
关注我的微博，可以获得更多精彩内容
