一、环境的搭建

1，安装Node.js ：
主要是用来下载和安装 React Native，地址：https://nodejs.org
将下载下来的pkg文件运行安装即可。

在终端运行 npm -v，如果出现版本号则说明 Node.js 安装成功

2，安装Homebrew、watchman、flow

在终端中运行如下命令安装 Homebrew，并通过 Homebre 安装 watchman 和 flow。

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

3，安装react-native-cli

在终端中输入如下命令通过 npm 安装 react-native-cli 的命令行工具（其中 -g 表示全局安装）

npm install -g react-native-cli

如果安装过程中发现需要管理员权限，可以在命令前加 sudo

sudo npm install -g react-native-cli

出现如下界面则说明安装成功了：

以后如果要更新 react-native-cli，可以执行如下命令：

sudo npm update react-native-cli -g

由于国内的网络特殊，如果发现使用npm安装太慢。可以改用淘宝镜像安装，具体参考我的另一篇文章： Cordova - 使用淘宝NPM镜像解决cordova无法安装，安装慢的问题

比如我们想把工程创建在用户文稿目录下：

cd ~/Documents

2，创建工程项目
我们运行如下命令创建一个名为 HelloWorld 的项目。

react-native init HelloWorld

可以看到 Documents 文件夹下已经成功地创建了这项目。

项目文件夹里面的内容如下:

有两种方式可以启动程序：

（1）点击 ios 文件夹里的 HelloWorld.xcodeproj 打开项目，并启动运行。

（2）或者打开终端，进入工程目录，执行如下命令启动程序。

react-native run-ios

运行效果如下：

而且除了会启动模拟器外，还会启动一个终端 React Packager。

我们将这个 js 文件中的如下内容：

Welcome to React Native!

欢迎访问 hangge.com

上面修改保存。我们不需要再重新编译运行程序。只需要在模拟器上按 Cmd+R 快捷键进行刷新即可。可以看到刚才修改的 JavasScript 文件直接生效了。

代码能实时渲染的原因：
之所以能做到代码的实时渲染，是因为应用启动运行时会自动请求 bundle 文件，里面存放的是应用的全部逻辑代码。
这个文件并不是项目中的静态资源文件，而是上面提到的“packager终端”服务通过动态分析 index.io.js 中的依赖，并对其进行合并得到的。这个服务运行代码实时渲染。这样我们修改了 JavaScript 文件的代码，不需要重新通过 Xcode 编译也能看到效果。