此文是我的出版书籍《React Native 精解与实战》连载分享此书由机械工业出版社出版书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示精选了大量实例代码方便读者快速学习。书籍还配套了视频教程「80 节实战课精通 React Native 开发」此视频课程建议配合书籍学习书籍中原理性的东西讲解的比较清晰而视频教程对于组件、API 等部分的代码实战开发讲解比较直观。书籍相关所有资料请访问http://rn.parryqiu.com本章将对开发过程中依赖的基础框架 Node.js 进行介绍并深入讲解为什么使用到了此框架。同时我们将开始配置 React Native 的开发环境并对最好用的代码编辑器 Visual Studio Code 以及相关高效开发插件做了详细地介绍。2.1 Node.js 简介此小节对 Node.js、npm 进行了介绍以及对为什么需要使用到 Node.js 框架进行了介绍。2.1.1 Node.js 简介关于对于 Node.js 的定义官网https://nodejs.org给出的定义如下。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型使其轻量又高效。 Node.js 的包管理器 npm是全球最大的开源库生态系统。虽然只有几句话但是已经很清楚地描述了 Node.js 以及 npm 的概念。Node.js 本身不是一个新的开发语言也不是一个 JavaScript 框架而是一个 JavaScript 的运行时。底层为 Google Chrome V8 引擎并在此基础上进行了封装可用于创建快速、高效、可扩展的网络应用。Node.js 采用事件驱动与非阻塞 I/O 模型以使得 Node.js 轻量并高效。图 2-1 为 Node.js 的架构图可以看到底层使用 C/C 编写。Chrome 的V8 引擎为 C 开发负责将 JavaScript 代码转换成机器码所以引擎的整体执行效率非常高。Google Chrome 浏览器的底层使用的就是此 V8 引擎线程池是完全使用 C 语言实现、全特性的异步 I/O 库 libeio用于执行异步的输入输出、文件描述符、数据处理、sockets 等libev 是在 Node.js 内部运行的 event loop最早用于类 Linux 系统。event loop 是一个让多线程执行更加高效的程序结构这些框架实现的语言不一样有 C有 C还有 JavaScript那么将这些代码整合在一起就是 Node bindings 做的事情最上层是使用 Node.js 开发时接触到的应用层Node.js 提供了一系列标准的 JavaScript 类库供开发者使用。图 2-1 Node.js 架构图2.1.2 npm 简介npm 是 Node.js 的包生态系统是最大的开源生态系统。你可以理解为基于 Node.js 框架全世界的开发者提交了各种各样的功能类库到 npm 中其他开发者在开发过程中需要使用的大部分功能都可以在 npm 中找到已存在的库完全不需要自己再重复去“造轮子”。npm 官网https://www.npmjs.com/目前2018 年 3 月npm 上已有六十多万个包是一个非常大的宝库你可以下载、使用、学习各种类库当然你也可以贡献自己的类库到 npm 中供其他开发者使用。你可以在 npm 中直接搜索你在开发过程中需要使用到的任何功能库假设你需要一些关于 cookie 处理的 JavaScript 类库图 2-2 就是在 npm 中搜索 cookie 相关类库的结果。使用 npm 库是你使用 React Native 开发 App 肯定会接触到的一个过程。图 2-2 npm 中搜索类库2.1.3 React Native 与 Node.js 关系Node.js 提供了很多的系统级的如文件操作、网络编程等特性并且是事件驱动、异步编程的。React 构建于 Node.js 之上其实本质上 React 也是 npm 包中的一个React Native 也是 npm 包之一只不过是功能非常强大的包而已。所以整个的框架都构建于 Node.js 之上并且 Node.js 还提供了海量的类库在这个完整的生态系统下开发过程将变得更加高效在后续的章节学习中将会慢慢体会到此生态系统的价值。2.2 React Native 开发环境配置此小节我们将开始配置 React Native 的开发环境包括 Node.js 的安装与 React Native 的安装并介绍代码编辑器 Visual Studio Code 以及高效开发插件的安装工欲善其事必先利其器搭建一个完美的开发环境学习起来才会更加顺畅。2.2.1 安装 Node.jsNode.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 的版本信息2.2.2 安装 React Native在安装 React Native 框架之前我们需要安装监控文件变更的组件 watchman便于后期 React Native 项目的打包更新时提高性能之用。在命令行中输入命令 brew install watchman 即可安装前提确保系统中已安装好了 Homebrewhttps://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 平台下运行Android 平台的执行结果如图 2-13 所示同样也可以完全适配。图 2-13 项目在 Android 平台下运行我们到目前还没有写任何一行代码生成出来的 App 已经可以完美适配了 iOS 与 Android 两个平台这正是 React Native 平台的魅力所在后续的实战章节我们还将继续领略到此框架的魅力。2.2.3 代码编辑器以及推荐插件一个好的代码编辑器会让你的开发效率有成倍地提升这里从性能、界面、插件生态系统以及编辑器的更新迭代情况综合考虑推荐大家使用微软推出的、免费的 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 Tools此插件提供 React Native 的开发环境可以直接在编辑器中使用 React Native CLI 的命令并可以对 React Native 框架提供的函数、参数、API 等进行智能提示非常地方便。插件地址https://marketplace.visualstudio.com/items?itemNamevsmobile.vscode-react-native/。ES7 React / Redux / GraphQL / React-Native snippets此插件在开发时提供 React Native 中会使用到的 ES 语法进行快速生成输入。如导入模块命令 import moduleName from ‘module’ 可以直接使用 imp 输入、导出模块命令 export default moduleName 只需要输入 exp 即可。熟悉这些命令之后可以省去很多书写固定长代码的时间。插件地址https://marketplace.visualstudio.com/items?itemNamedsznajder.es7-react-js-snippets/。react-beautify此插件用于快速格式化 React Native 开发过程中的 JavaScript、JSX 等代码免去很多手动整理代码格式的过程保持一个规范、整洁、易读的代码格式是一个优秀软件工程师的必备素养。插件地址https://marketplace.visualstudio.com/items?itemNametaichi.react-beautify/。