前言

React Native开发环境可以搭建在Windows平台或者Mac平台下。早期React Native对Mac平台支持的比较好，但是到了0.21.0版本，React Native在win平台也开始满满成熟起来。当然，在win平台上你无法查看iOS运行效果，在此我显示的是在Mac下面搭建React Native环境，并且创建第一个Hello World!项目。

在mac系统环境下搭建React Native环境，首先要通过App Store把操作系统升级到最新的版本，Xcode也要安装和升级到最新的版本。Xcode安装以后要启动一次，同意苹果的开发者协议，再自行补充安装一些Xcode开发组件。

React Native环境搭建

一.安装Homebrew

Homebrew, 简称brew, Mac系统的包管理器, 用于安装NodeJS和一些其他必需的工具软件。
Home-brew 的使用方式:
1)搜索软件：brew search 软件名，如brew search wget
2)安装软件：brew install 软件名，如brew install wget
3)卸载软件：brew remove 软件名，如brew remove wget

Homebrew的安装非常简单，打开终端复制、粘贴以下命令，回车，搞定

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

当你看到Installation successful的时候，说明你已经安装成功。截图如下：

我们可以通过下面的语句来查看是否安装成功，即Homebrew的版本号。

brew -v

说明：Homebrew还有很多操作，这里我就不做一一说明了，具体可以参考这位朋友写的一篇博客。Ruby系列文章之2 --- Windows下安装Ruby on Rails 开发环境

二.安装Node.js

安装语句

brew install node

三.安装React Native的命令行工具（react-native-cli）

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

安装命令如下

npm install -g react-native-cli

若出现错误（可能由于权限不足），则实用以下语句进行安装：

sudo npm install -g react-native-cli

//将npm仓库替换为国内镜像：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

四.推荐安装的工具

1.Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。
终端运行语句安装：

brew install watchman

2.Flow

Flow是一个静态的JS类型检查工具，可方便找出代码中可能存在的类型错误。
译注：你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个flow工具的语法。这一语法并不属于ES标准，只是Facebook自家的代码规范。
终端运行语句安装：

brew install flow

五.React Native开发工具安装

React Native没有带任何代码编辑工具，它的代码可以使用任何一款纯文本处理器进行编辑。React Native官方推荐了三种IDE编写React Native应用:Atom和Nuclide、WebStorm、Sublime Text和VSCode＋React Native Tools。我这里推荐Sublime Text编辑器进行代码编辑。

1.Sublime Text3安装

请直接访问Sublime Text3的官网进行安装。Sublime Text3下载地址：http://www.sublimetext.com/3

2.Package Control插件安装

（1）使用 [Ctrl + `] (或View > Show Console menu) 打开Sublime Text控制台，将下面的Python代码粘贴到控制台里:

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
This code creates the Installed Packages folder for you (if necessary), and then downloads the Package Control.sublime-package into it. 

3.用Package Control安装插件

这里我就不详细说了，我是使用了babel-sublime和sublimeLinter插件，大家可以根据自己的习惯进行安装。

六.创建项目

1.初始化项目

命令行创建项目

react-native init ZFJProject

初始化项目需要很长的一段时间，大家可以出去转一转，远眺一下，放松放松；然后就是项目创建成功了；项目里面iOS文件和安卓文件。

注：如果大家的创建时间太长，可以找到Node.js的安装目录，进入nodejsnode_modulesnpm找到文件npmrc，打开后在该文件末尾加上
registry = https://registry.npm.taobao.org 然后保存退出即可。

2.运行工程

我这里直接以iOS为例，可以直接运行ZFJProject.xcodeproj文件，当然也可以直接通过代码运行，代码如下：

//  进入项目根目录
cd ZFJProject

//  运行iOS项目
react-native run-ios

模拟器效果

3.编辑代码

将index.ios.js拖入你安装的编辑器，我这里使用的是Sublime Text 3

这样你就可以这这里面装逼了。。。编辑完成，重新运行就可以看到新的效果了