第2章 React Native入门基础

2.1 React Native环境搭建

俗话说“工欲善其事，必先利其器。”在正式着手开发React Native应用之前，需要先搭建好开发环境。通常，搭建React Native开发环境需要安装以下几个工具。

·Node.js：React Native需要借助Node.js来创建和运行JavaScript代码。

·原生开发工具及环境：React Native的运行需要依赖原生Android和iOS环境，因此需要安装原生Android和iOS开发环境。

·辅助工具：代码编辑器Visual Studio Code或WebStorm，远程调试工具Chrome浏览器等。

Node.js本身并不是新的开发语言，也不是JavaScript框架，而是一个JavaScript运行时环境，底层使用Google Chrome V8引擎，并在此基础上进行了封装，可用于创建快速、高效、可扩展的Web应用。同时，Node.js的包管理器npm，也是全球最大的开源库生态系统管理之一。

安装Node.js前，需要从Node.js官网下载当前系统对应的安装包。安装时推荐使用最新的LTS版本，因为LTS版本维护的周期较长且稳定性较好。

下载完成后双击对应的安装包，根据向导提示，单击相应的【继续】或【同意】按钮，最后单击【安装】按钮即可完成安装，如图2-1所示。

图2-1 安装Node.js

安装完成之后，可以使用node-v命令来验证是否安装成功，如图2-2所示。同时，安装最新版的Node.js之后，不需要再安装npm包管理工具，因为最新版的Node.js已经默认集成了npm。

图2-2 查看Node.js和npm的版本信息

当然，实际开发中还可以使用nvm来安装和管理Node.js，并且使用cnpm来代替npm，因为cnpm使用的是淘宝源，所以对于国内的开发者来说下载的速度更快。

由于React Native应用仍然是基于原生平台的，所以搭建React Native环境的同时还需要安装原生Android和iOS开发环境。

搭建Android开发环境需要Java环境的支持，因此需要先从JDK官网下载和安装操作系统对应的JDK版本。安装成功之后可以通过如图2-3所示的方法进行验证。如果成功输出版本信息，则表明JDK安装成功。

图2-3 验证JDK是否安装成功

JDK安装完成之后，接下来需要安装Android开发工具Android Studio和Android SDK Tools。读者可以从Android Studio官网下载Android Studio及命令行工具Android SDK Tools进行安装。

安装完成之后即可启动Android Studio。第一次打开Android Studio时，需要在设置面板中配置Android SDK Tools的路径Android SDK Location。成功配置Android SDK Tools的路径后，还需要下载和安装SDK相关工具，如图2-4所示。

图2-4 下载Android SDK及其SDK Tools

由于React Native的Android环境需要Android SDK Build-tools version 23.0.1及以上版本的支持，所以确保本地已经安装了相关的版本。

需要说明的是，无论是JDK还是Android SDK，以及需要安装的其他开发工具，如Node.js、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系统，需要依次点击【计算机】→【属性】→【高级设置】→【环境变量】打开环境变量面板，然后将Android SDK Tools文件下的tools和platform-tools的文件路径添加到环境变量PATH中，如图2-5所示。

图2-5 Windows系统配置Android环境变量

完成上面的配置之后，可以通过adb命令来验证是否配置成功。如果正确配置之后还是找不到Android SDK Tools工具或命令，可以尝试重启命令终端。

众所周知，使用React Native开发iOS应用时需要macOS操作系统的支持，所以如果经济条件允许的话最好购置一台Mac电脑。只有使用React Native同时开发iOS和Android应用，才能发挥出React Native跨平台开发的优势。

目前，使用React Native开发iOS端的应用需要Xcode 7及更高版本的支持，如果还没有安装Xcode，可以从App Store下载并安装，如图2-6所示。

图2-6 通过App Store安装Xcode工具

需要说明的是，Xcode安装程序必须通过Apple官网或App Store下载。2015年9月发生的XcodeGhost非法代码植入事件，就是因为开发者下载的是非官方Xcode安装程序。

在Node.js安装完成之后，搭建React Native开发环境还需要安装React Native及其辅助工具。安装React Native只需要借助命令行工具即可，安装命令如下。

    npm install -g react-native-cli

如果使用npm方式下载速度较慢的话，可以使用cnpm代替npm进行安装，即cnpm install-g react-native-di。安装完成之后，可以使用如图2-7所示的方式验证是否安装成功。

图2-7 查看React Native版本和帮助信息

除了一些必须的工具外，为了提高开发效率，还需要安装一些辅助工具，如Homebrew、Watchman和Chrome浏览器等。

Homebrew是一款macOS系统环境下的软件包管理工具，拥有安装、卸载、更新、查看和搜索软件包等很多实用的功能。

Watchman是由Facebook技术团队提供的监视文件系统变更的工具，此工具可以捕捉文件的变化来实现实时刷新，从而提高开发的性能和效率。在macOS系统环境下，可以通过以下命令来安装。

    brew update
brew install watchman

Chrome浏览器可以作为React Native开发的远程调试工具。为了方便对React Native程序进行调试，在Chrome浏览器安装完成之后，还需要从Chrome应用商店下载和安装React Developer Tools插件。

本周热推：