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所示。
![image](https://yqfile.alicdn.com/d19370732716901c0057d7b1fc5dc9f66ddfe004.png)
图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.gitcd watchmangit checkout v4.7.0 # the latest stable release./autogen.sh./configuremakesudo make install
Windows系统上的Watchman现在还处于Alpha内部测试阶段,对系统也有限制,例如,仅支持Windows x64 on Windows Server 2012 R2以及之后的最新Windows版本。如果读者想抢先体验的话,可以在Watchman项目的问题19(https://github.com/facebook/watchman/ issues/19)中找到详细的介绍。