1.3 搭建React Native开发环境
“磨刀不误砍柴工”，在正式开发React Native应用之前，需要先搭建好React Native的开发环境。搭建React Native开发环境有以下几个主要步骤。
- 原生开发工具：iOS开发使用Xcode，Android开发使用Android Studio and SDK Tools。
- Node.js（https://nodejs.org/）：React Native是借助Node.js，即JavaScript运行时来创建JavaScript代码的。
- React Native（https://www.npmjs.com/package/react-native/）：安装React Native命令行工具。
- 其他辅助工具：代码编辑器Nuclide（https://nuclide.io/）、远程调试工具Chrome浏览器（http://www.google.cn/chrome/browser/）等。
?注意：iOS开发是依赖于macOS的，所以使用React Native开发iOS应用需要使用macOS。
1.3.1 安装原生开发工具——Android
由于React Native应用仍然是基于原生平台（参考本书1.1.节React Native的结构），所以搭建React Native的前提是安装原生开发工具。
（1）安装Java Development Kit（JDK），从JDK官网（http://www.oracle.com/technetwork/ java/javase/downloads/jdk8-downloads-2133151.html）下载操作系统相应版本安装即可。安装成功后可以通过如图1.10所示的方法进行验证。
图1.10 查看JDK安装是否成功及Java版本号
（2）再安装Android开发工具：Android Studio and SDK Tools。从Android Studio官网（https://developer.android.com/studio/index.html）分别下载Android Studio及命令行工具Android SDK Tools。
?提示：国内网络情况下访问Android相关网站较慢，所以读者可以搜索国内的Android资源网站进行下载。
（3）第一次打开Android Studio时，需要在“设置”中配置Android SDK Tools的路径Android SDK Location，如图1.11所示。
（4）成功配置Android SDK Tools的路径之后，还要下载和安装SDK相关工具，如图1.12所示。
（5）此时，还需要将Android SDK Tools的路径加入到系统变量PATH中。
?提示：无论是JDK，还是Android SDK Tools，以及以后要安装的其他开发工具（如Node.js、npm、React Native等），根据实际情况，都需要添加到系统变量PATH中，否则会发生找不到该工具或命令的错误。当然，有时候安装程序会自动完成该配置，请读者知悉。
对于Linux或macOS系统，将下面的配置添加到~/.bashrc文件中。
export ANDROID_HOME=/path/to/android/sdk/tools
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
对于Windows系统，将下面的路径添加到环境变量PATH中。
- Android SDK Tools文件夹路径。
- Android SDK Tools文件夹里的tools文件夹路径。
- Android SDK Tools文件夹里的platform-tools文件夹路径。
添加效果如图1.13所示。
图1.13 添加Android SDK Tools路径到Windows系统变量PATH
?提示：如果正确配置之后，还是找不到Android SDK Tools工具或命令，可以尝试重新加载环境变量或重启终端。
1.3.2 安装原生开发工具——iOS
首先需要再次提醒读者的是，使用React Native开发iOS应用是需要macOS的，所以经济条件允许的话，最好购置一台Mac电脑。只有在使用React Native同时开发iOS和Android应用，才能发挥出React Native跨平台的优势。
Xcode的安装比较简单，在macOS中登录Apple ID后，打开App Store搜索Xcode安装即可，如图1.14所示。
?注意：请务必在Apple官网或App Store下载Xcode安装程序。2015年9月发生的轰动国内的XcodeGhost事件，起因就是因为开发者下载并使用了非官方被植入非法代码的Xcode安装程序。
图1.14 在App Store中查找并安装Xcode
1.3.3 安装Node.js
打开Node.js官网的下载页面（https://nodejs.org/en/download/），下载当前系统对应的安装包，这里以macOS系统为例，下载的安装包为node-v6.9.2.pkg。
?提示：推荐读者使用最新的LTS版本，因为官方维护的周期较长，功能和稳定性较好。
（1）下载完成后双击安装包进行安装，如图1.15所示。
（2）根据安装向导提示，单击相应的“继续”或“同意”按钮，最后单击“安装”按钮进行安装。安装成功后，如图1.16所示。
图1.15 安装Node.js 图1.16 Node.js安装成功在图1.16中，需要注意以下有用的信息。
- Node.js的安装路径：/usr/local/bin/node。
- npm的安装路径：/usr/local/bin/npm。
- 保证/usr/local/bin添加到了系统变量$PATH中。
?提示：Node.js在Windows系统上的安装过程和macOS相同，并且Node.js的Windows安装包默认还会自动将安装好的工具和命令的路径添加到环境变量PATH中。
（3）通过如图1.17所示方法验证安装是否成功。
图1.17 查看Node.js、npm安装路径及版本号
?小知识：实际开发中通常使用nvm（https://github.com/creationix/nvm）安装和管理Node.js，并且使用cnpm（https://npm.taobao.org/）来代替npm，这是因为cnpm使用的是淘宝源，下载的速度较快。
1.3.4 安装React Native
在Node.js及npm安装好之后，终于可以进入主题：安装React Native了。安装React Native就是安装React Native的命令行工具，由于前面已经安装好Node.js及npm，安装React Native就非常简单了。使用如下命令即可：
npm install -g react-native-cli
?提示：如果使用npm下载速度较慢的话，可以使用cnpm代替npm，即cnpm install -g react-native-cli。
安装完成后，可以通过如图1.18所示方法验证是否成功。
图1.18 查看react-native命令行工具帮助和版本号
1.3.5 安装其他辅助工具
安装完以上所有工具后，理论上已经可以开始React Native开发之旅了，但在实际开发中，还有一些必备的高效生产工具，在这里推荐读者也安装一下。
1．Nuclide开发工具
Nuclide（https://nuclide.io/）是Facebook官方推出的一款React Native开发工具。从严格意义上说，Nuclide并不是一款独立的编辑器，它只是基于Atom（https://atom.io/）的一个扩展，所以本书在后面的讨论中，并不严格区分Nuclide和Atom。
当然，读者在了解React Native和Nuclide之前，肯定已经有自己熟悉的JavaScript的开发工具，如Sublime Text（http://www.sublimetext.com/）、WebStorm（https://www.jetbrains. com/webstorm/）等，但是笔者还是强烈推荐Nuclide，原因如下。
- 官方出品，对React Native新特性及开发、调试支持更好。
- 基于Atom，拥有了庞大的第三方插件库。
Nuclide的安装过程如下： - 从Atom官网（https://atom.io/）下载最新版本的Atom。
- 打开Atom，选择Settings|Install Packages命令，搜索并安装Nuclide，如图1.19所示。
图1.19 安装Nuclide
2．Chrome浏览器
Chrome浏览器是React Native开发的远程调试工具，安装比较简单，这里就不介绍了。在Chrome浏览器安装完成后，还需要在Chrome的应用商店中安装这款Chrome插件：React Developer Tools，如图1.20所示。
?提示：和Android的问题一样，国内网络情况下访问Chrome相关网站也较慢，所以读者可以搜索国内的其他资源网站进行下载和安装。
图1.20 安装Chrome插件React Developer Tools
3．Watchman工具
Watchman（https://facebook.github.io/watchman/docs/install.html）是由Facebook提供的监视文件系统变更的工具，它可以提高开发时的性能（捕捉文件的变化从而实现实时刷新）。
macOS系统的安装比较简单，使用HomeBrew（http://brew.sh/）工具即可快速完成安装，安装命令如下：
brew update
brew install watchman
?小知识：HomeBrew是macOS平台上的软件包管理工具，拥有安装、卸载、更新、查看和搜索软件包等很多实用的功能。
Linux系统需要下载源码自己编译安装，方法也很简单，安装命令如下：
git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.7.0 # the latest stable release
./autogen.sh
./configure
make
sudo make install
Windows系统上的Watchman现在还处于Alpha内部测试阶段，对系统也有限制，例如，仅支持Windows x64 on Windows Server 2012 R2以及之后的最新Windows版本。如果读者想抢先体验的话，可以在Watchman项目的问题19（https://github.com/facebook/watchman/ issues/19）中找到详细的介绍。
