Mac配置React Native的开发环境

1.安装Homebrew

homebrew是OS X的套件管理器

• 安装方式：
  复制：/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"到终端，回车执行。

• 验证安装成功与否：
  终端键入brew -v出现如下图则表示安装成功：

努力一定会成攻

有关homebrew更多的用法请点击这里或者这里

2.安装Node.js

• 安装方式：
  来到官网下载界面，选择对应版本自动下载。

美到流产

下载的pkg格式文件点击安装即可。

安装了node.js自动就有了npm，npm是node的模块管理器，npm的背后有一个强大的数据库，里面存储了每个包的详细信息（版本、授权信息等）。

• 更新npm方式：
  sudo npm install npm -g

3.安装WatchMan

用于监控bug文件及其变化，而且还能触发指定的操作。

• 安装方式：
  在终端键入：brew install watchman，回车执行。
  出现下图结果表示安装成功。

努力再次成攻

4.安装Flow（可选）

JavaScript的静态类型检查器

• 安装方式：
  在终端键入：brew install flow，回车执行。
  出现下图结果表示安装成功。

高傲的鸡

5.安装React Native

环境要求：

1. iOS需要Xcode7以上的版本;
2. Android需要最新的JDK，JDK下载请点击这里到Oracle官方下载界面下载。

• 安装方式：
  打开终端键入：npm install -g react-native-cli，回车执行。

注：

由于网络原因需要把npm的国外仓库源替换为国内的镜像。

• 替换方法：

1. 终端键入npm config set registry https://registry.npm.taobao.org，回车；
2. 键入npm config set disturl https://npm.taobao.org/dist，回车。

创建第一个React Native项目

cd到指定目录，在终端使用react-native init 项目名，回车，等待时间较长。终端出现如下结果表示安装成功：

清者自清

对应的AAA项目文件夹下会出现如下列表：

嘻嘻嘻

在Xcode和Android Studio上运行项目

注：在运行时，会另起一个终端窗口，并启动了一个服务器，这个窗口不可关闭！！

后果自负

• iOS：
  可以直接运行，iOS文件夹下的项目文件 AAA.xcodeproj ，运行结果如下：

阴者自阴

• Android：
  用Android Studio打开android文件夹即可，刚开始会报如下错误：

时常告诉自己要坚强
点击蓝色字体下载即可。 人生如戏

运行结果如下：

哭成一双青蛙眼