一、React Native 搭建开发环境(1)(Mac OS - IOS项目篇)

React Native是Facebook推出的一个开发IOS和安卓APP的技术。至于更多的详情，这里不再描述，大家可以自行百度它的定义。

原因：由于我想在一台电脑上同时开发IOS和Android两个APP，所以用的Mac。

这里就讲一讲我在搭建开发环境过程中遇到的坑，也为后面学习该技术的道友指一条坑少的路。

本文讲解的是，在Mac OS上，搭建IOS开发环境的步骤。

Android篇，请移步：React Native 搭建开发环境(2)(Mac OS - Android项目篇)

1.安装Homebrew

Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。

打开 Mac OS里的 终端，直接复制粘贴以下命令，回车：

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

（注意：在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到 /usr/local 目录不可写的权限问题。

可以使用此命令修复：sudo chown -R `whoami` /usr/local  ）

这里踩个小坑：

众所周知，由于国内长城的原因，导致可能有很多国外的资源下载不下来或下载速度超级慢。

于是在安装了Homebrew之后，有必要的童鞋也可以设置一下国内的加速源。

我用的是：http://ban.ninja

a.在Mac OS的 终端 里输入 vi ~/.bash_profile 会打开这个配置文件；

b.然后在里面加上一行：export HOMEBREW_BOTTLE_DOMAIN=http://7xkcej.dl1.z0.glb.clouddn.com

c.加了之后，按 ESC 键，退出编辑；

d.然后再输入命令 :wq 保存并退出当前配置文件；

e.让刚才的更改生效：source ~/.bash_profile

f.输入下面的命令，查看刚才更改的环境变量是否生效：

echo $HOMEBREW_BOTTLE_DOMAIN

如果看到 http://7xkcej.dl1.z0.glb.clouddn.com 等字样，说明我们刚才的配置已经OK了。

2.安装NodeJS

使用Homebrew来安装Node.js。

（注意：如果你的电脑上已经装了NodeJS，只要保证版本在5.0及以上，就不用再次安装。）

React Native目前需要 NodeJS 5.0 或更高版本。本文发布时Homebrew默认安装的是最新版本，一般都满足要求。

brew install node

安装完node后建议设置npm镜像以加速后面的过程（或使用***工具）。

（注意：建议不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！）

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

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

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。

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

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global

yarn config set disturl https://npm.taobao.org/dist --global

（如果你看到 EACCES: permission denied 这样的权限报错，那么请参照上文的homebrew译注，修复 /usr/local 目录的所有权：

sudo chown -R `whoami` /usr/local ）

安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令；

用 yarn add 某第三方库名代替 npm install --save 某第三方库名。

（注意：目前npm5（发文时最新版本为5.0.4）存在安装新库时会删除其他库的问题，导致项目无法正常运行。

请尽量使用 yarn 代替 npm 操作。）

4.安装XCode

React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。

这一步骤会同时安装Xcode IDE和Xcode的命令行工具。

虽然一般来说命令行工具都是默认安装了，但你最好还是启动Xcode，并在 Xcode > Preferences > Locations 菜单中检查一下，

是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具，比如git等。

5.安装Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。

安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。

brew install watchman

6.安装开发工具

根据你的喜好，选择安装一款开发工具。

我是搞C#的，自然对微软的工具情有独钟：VSCode，另外还装了款比较喜爱、易上手的工具：WebStorm。

除此之外，还有很多其他的工具，比如：Sublime Text、还有Facebook自己出品的 Nuclide 等等。

7.测试安装

（注意：init 命令默认会创建最新的版本，而目前最新的 0.45 及以上版本需要下载 boost 库编译。

此库体积庞大，在国内即便FQ也很难下载成功，导致很多人无法正常运行iOS项目，中文网在论坛中提供了这些库的国内下载链接。

如果你嫌麻烦，又没有对新版本的需求，那么可以暂时创建0.44.3的版本。

提示：你可以使用 --version 参数（注意是两个杠）创建指定版本的项目。

例如： react-native init MyApp --version 0.44.3   注意版本号必须精确到两个小数点。）

这里接着踩一个大点的坑：

boost 编译库百度网盘下载地址：http://pan.baidu.com/s/1kVDUAZ9

下载下来后请放置到 ~/.rncache 目录，比如你可以打开 终端，输入：

cd ~ （进入到用户目录）

mkdir .rncache （创建rncache目录，如果有，就不用创建，再次创建时会提示目录已存在）

cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/  （复制下载目录文件地址，然后拷贝到rncache目录下）

........ （复制刚刚下载的其他文件）

全部复制完成后，就可以开始init ReactNative项目了：

react-native init MyFirstRNProject

cd MyFirstRNProject

react-native run-ios

然后经过漫长的等待，编译完成后，虚拟机上会打开一个有个react native字样的页面，说明咱们的IOS开发环境搭建成功了！

（提示：如果 run-ios 无法正常运行，请使用Xcode运行来查看具体错误（run-ios的报错没有任何具体信息）。

你也可以在 Nuclide 中打开 MyFirstRNProject 文件夹 然后运行，或是双击 ios/AwesomeProject.xcodeproj 文件然后在 Xcode 中点击Run按钮。）

8.修改项目

现在你已经成功运行了项目，我们可以开始尝试动手改一改了：

·使用你喜欢的编辑器打开 index.ios.js 并随便改上几行。

·在iOS Emulator中按下⌘+R（保存）就可以刷新APP并看到你的最新修改！

9.完成

恭喜！你已经成功运行并修改了你的第一个React Native应用。

如果您觉得此文对您有所帮助，那么您也可以打赏我。

不在乎数目的多少，我只需要知道，我帮助到了您，那就是我持之以恒的动力！

  

编程是一门艺术。我用代码，改变您的生活！

帅帅的小毛驴

2017-09-19