下载掌阅APP，畅读海量书库
立即打开
本节我们将开始配置React Native的开发环境，包括Node.js的安装与React Native的安装，并介绍代码编辑器Visual Studio Code以及高效开发插件的安装，工欲善其事必先利其器，搭建一个完美的开发环境，学习起来才会更加顺畅。
Node.js提供了多个平台的安装包，掌握了Node.js，可以开发出很多跨平台的应用。
在图2-3的下载地址（ https://nodejs.org/en/download/ ）中，显示了Node.js目前可以下载安装的平台。
图2-3 Node.js下载页面
可以根据自己特定的开发环境，下载对应的版本安装即可。Node.js官方推荐下载LTS版本，LTS俗称长效版，框架整体的变更不频繁、稳定可靠，一般用于上线版本，当然学习环境的安装也推荐安装此版本。
如果需要安装其他的版本，在此下载页面的底部有Previous Releases链接，可查看到Node.js已发布的所有版本安装包。
下面以macOS系统为例，进行Node.js的安装。Windows等其他平台下载对应的安装包安装即可，整个过程没有需要特别配置的地方，只要注意Node.js的安装包分为32位和64位，下载你电脑对应的安装包即可，且需要安装最低版本为4.0以上的Node.js。
这里演示的是Node.js 6.11.3版本的安装，如图2-4所示，双击安装包进行安装，界面会有当前安装包包含的Node.js版本和npm版本的提示。
图2-4 安装Node.js的版本提示
安装程序需要确认Node.js的License，点击同意即可。同时会提示占用的系统空间，继续下一步。如图2-5所示，安装程序会进行安装，安装完成后，会在界面中提示Node.js和npm最终安装的路径，需要检查系统的全局变量是否已包含了对应的目录，一般都是默认配置好的。
图2-5 Node.js安装完成的提示信息
在Node.js安装完成后，可以通过命令行检查Node.js以及npm是否安装成功。打开macOS的终端或者Windows系统的命令行工具，输入命令node–v可以查看到当前安装成功的Node.js版本信息，输入npm–v可以查看到当前连带安装的npm版本信息。
运行结果如图2-6所示，至此说明Node.js框架已安装成功。
图2-6 命令行查看Node.js和npm的版本信息
在安装React Native框架之前，我们需要安装监控文件变更的组件watchman，便于后期React Native项目的打包更新时提高性能之用。
在命令行中输入命令brew install watchman即可安装，前提是确保系统中已安装好了Homebrew（ https://brew.sh/ ）。
安装过程如图2-7所示，首次更新Homebrew的时间可能稍长，耐心等待片刻即可。
注意在Windows环境下不需要进行Homebrew和watchman的安装，跳过此安装步骤即可。
图2-7 在macOS下安装watchman
接下来我们开始安装React Native，之前介绍npm时说过，React Native也是一个npm的包，那么这里就可以通过npm命令进行React Native框架的安装。
图2-8为React Native在npm包中的项目页面，地址为： https://www.npmjs.com/package/react-native 。
图2-8 npm中的React Native项目页面
在npm下安装一个包的命令格式为：npm install+包的名称，如果加上参数g，命令npm install–g+包的名称，就是全局安装，而不仅仅是在运行命令的当前目录中安装。
所以，我们通过npm命令执行安装React Native CLI的命令行工具即可，后续的React Native项目初始化都可以通过React Native CLI命令行工具执行。
安装命令为：npm install-g react-native-cli。
命令执行的结果如图2-9所示。
图2-9 安装React Native CLI
下面我们在本书配套源码的02-02-02文件夹中进行第一个React Native项目的初始化，执行命令：react-native init HelloReact。
命令执行过程如图2-10所示。
图2-10 初始化React Native项目
初始化完成后，最终生成的项目文件结构如图2-11所示。
图2-11 React Native初始化项目结构
我们使用Xcode打开ios文件夹中的iOS项目以及使用Android Studio导入android文件夹中的Android项目。
iOS平台的执行结果如图2-12所示，可以看到，React Native构建的项目直接就适配好了iPhone X，其他的iOS设备适配当然也没有任何问题。
图2-12 项目在iOS平台下运行 |
图2-13 项目在Android平台下运行 |
Android平台的执行结果如图2-13所示，同样，也可以完全适配。
到目前为止还没有写过任何一行代码，生成的App却已经可以完美地适配iOS与Android两个平台，这正是React Native平台的魅力所在，后续的实战章节我们还将继续领略此框架的魅力。
一个好的代码编辑器会让你的开发效率成倍地提升，这里从性能、界面、插件生态系统以及编辑器的更新迭代情况综合考虑，推荐大家使用微软推出的、免费的Visual Studio Code，的确非常好用，可以说它是目前前端开发的首选编辑器。图2-14是Visual Studio Code编辑器的主界面，编辑器的左侧五个按钮依次为：项目文件浏览器、代码搜索、git管理、调试工具、插件安装，右侧为代码编辑界面，最下面的状态栏包含了如git信息、代码定位、代码中的错误与警告、文件编码、代码格式等相关信息。
图2-14 Visual Studio Code编辑器
Visual Studio Code还有一个很大的优势就是有很多提升开发效率的插件，这里推荐几个开发React Native项目必备的插件，这些插件会大大提高你的开发效率。你只需要直接在编辑器的插件选项中搜索名称即可安装。
Visual Studio Code编辑器的插件安装界面如图2-15所示，在左侧的菜单按钮中选择插件，然后你可以在图中标示的搜索框中搜索需要安装插件支持的语言或直接输入插件名称，在搜索结果列表中选择对应的插件点击安装按钮即可。
图2-15 编辑器插件安装
此插件提供React Native的开发环境，可以直接在编辑器中使用React Native CLI的命令，并可以对React Native框架提供的函数、参数、API等进行智能提示，非常方便。
插件地址： https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native/ 。
此插件在开发时提供React Native中会使用到的ES语法，可以快速生成输入。
如导入模块命令import moduleName from'module'可以直接使用imp输入、导出模块命令export default moduleName只需要输入exp即可。
熟悉这些命令之后，可以省去很多书写特定代码的时间。
插件地址： https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets/ 。
此插件用于快速格式化React Native开发过程中的JavaScript、JSX等代码，免去很多手动整理代码格式的过程，保持规范、整洁、易读的代码格式，是一个优秀软件工程师的必备素养。
插件地址： https://marketplace.visualstudio.com/items?itemName=taichi.react-beautify/ 。