【Hybrid开发高级系列】ReactNative(一) —— 环境构建专题

React Native项目github址:

https://github.com/facebook/react-native

React Native项目官网文档:

http://facebook.github.io/react-native/docs/getting-started.html

1 (三)React Native配置安装

特别声明:facebook官网说当前react native欢迎是需要OS X,不过我也看到了有人通过windows系统配置该环境哈~大家有兴趣可以百度搜索一下。

1.1 Homebrew安装

Homebrew是OS X不可获取的套件管理器，我们可以通过它获取并且安装很多组件,安装方式如下:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

然后通过命令行执行brew -v进行检查brew是否已经安装成功。整体截图如下:

1.2 Node.js安装

1.2.1 安装nvm

1. 打开github官网https://github.com/，输入nvm搜索,选择creationix／nvm，打开

2. 找到Install script，复制

sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

3. 打开终端，把第2步复制的添加sudo权限，粘贴到终端里

4. 此时nvm虽然安装好了，但仍然不能用，因为还没有添加环境变量，nvm安装好以后会提示添加环境变量到，第三步图中提示自己添加一下的代码便是，如下图，如此nvm就可以用了

1.2.2 安装Node.js

第二部分: 安装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安装即可。

1.2.3 安装watchmam

第三部分:安装watchmam，该用于监控bug文件，并且可以触发指定的操作，安装方式如下:

brew link autoconf

brew link automake

brew install watchman

安装截图如下:

1.2.4 安装flow

第四部分:安装flow,

flow是一个 JavaScript的静态类型检查器，建议安装它，以方便找出代码中可能存在的类型错误，官网:http://www.flowtype.org/具体命令为:

brew install flow

安装截图如下:

1.3 原生开发环境安装:

针对iOS开发，我们只需要安装Xcode7.0或者7.0以后版本，该可以通过AppStore进行下载安装。

针对Android开发，Android环境配置网上非常多了，我相应看这篇文章的朋友电脑上面基本都有Android开发环境的了~针对安装详细(点击进入参考文章)。

1.4 ReactNative安装

现在就是最后一步，也是最激动人心的时刻到了，我们使用命令行运行如下命令安装React Native:

sudo npm install -g react-native-cli

安装截图如下:

经过以上的四个大步骤我们基本完成React Native从基本环境的搭建工作，下面我们来进行一个实例演示React Native项目的效果。

2 (四)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如下: