【React Native开发】React Native For Android环境配置以及第一个实例

时间：2016-01-04 18:14:55 阅读：352 评论：0 收藏：0 [点我收藏+]

标签：

转载请标明出处：
http://blog.csdn.net/developer_jiangqq/article/details/50456967
本文出自:【江清清的博客】

(一)前言

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框架文件。