React Native iOS环境搭建实现

前言

最近公司可能会用到React Native，所以先搭个环境先看看，用到的工具主要有以下几个：

• Homebrew 是一个方便开发者在Mac OS X系统上面安装Linux工具包的Ruby脚本工具，主要用于安装后面需要安装的Watchman、Flow ，而Mac OS X下已经内置了Ruby的解释环境.

  因此安装Homebrew只需在Mac终端下执行以下命令：

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

- [Node.js](https://nodejs.org/) 是一个Javascript运行环境(Runtime)，执行Javascript的速度非常快,性能非常好，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用[事件驱动](http://baike.baidu.com/view/536048.htm),非阻塞[I/O](http://baike.baidu.com/subview/300881/11169495.htm) 模型而得以轻量和高效，非常适合在分布式设备上运行的数据密集型的实时应用。

安装Node.js在终端下执行以下命令：

brew install node

- [Watchman](https://facebook.github.io/watchman/) 是Facebook开源的一个文件监控服务，React Native 用它来检测代码变化，以便重新编译。

安装Watchman在终端下执行以下命令：

brew install watchman

- 接下来是安装react-native-cli，安装比较简单：

npm install -g react-native-cli

NPM 是 Node 的包管理器。你可以将它想象成 Ruby 中的 RubyGems、iOS 的 CocoaPods，以及 Java 中的 Gradle/Maven 等。它能够让你更容易地下载和管理项目所需的任何相关项。

***

[React Native](https://facebook.github.io/react-native/docs/getting-started.html) 安装环境到这里基本就配置好了，下面创建一个iOS的例子，在终端中将目录切换到你保存工程的目录，然后执行如下的命令：

react-native init ReactNativeProject

> 注：创建工程由于需要加载很多包，所以会比较慢一点。此命令建的工程默认在 /Users/[你的用户名]下，**ReactNativeProject**为创建的iOS工程名称。

最后打开iOS工程：

open ios/ReactNativeProject.xcodeproj

直接在Xcode上点击Run运行工程(需要加载Shell脚本会比较慢一点)，但如无意外会报以下错误：


![版权所有，请勿盗图哈](https://img.haomeiwen.com/i1940170/e7994d8bd865e411.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

出现以下错误，如果前面安装都正确的话，基本上是由于地址不对，但是为了保险起见，还是在终端下执行以下命令：

npm start

然后在**AppDelegate**里面修改jsCodeLocation地址：
>注明：React创建的工程没有针对iOS9下https做处理，因此请在手动在**Info.plist**文件App Transport Security Settings项，增加Allow Arbitrary Loads=YES

![版权所有，请勿盗图哈~~](https://img.haomeiwen.com/i1940170/00e008c0d8e153dc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

最终运行效果如下：



![版权所有，请勿盗图哈~~](https://img.haomeiwen.com/i1940170/1715d16da70cc34b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)