此文是我的出版書籍《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.js

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 的版本信息

2.2.2 安裝 React Native

在安裝 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 平臺下運行
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?itemName=vsmobile.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?itemName=dsznajder.es7-react-js-snippets/。

• react-beautify
  此插件用於快速格式化 React Native 開發過程中的 JavaScript、JSX 等代碼，免去很多手動整理代碼格式的過程，保持一個規範、整潔、易讀的代碼格式，是一個優秀軟體工程師的必備素養。
  插件地址：https://marketplace.visualstudio.com/items?itemName=taichi.react-beautify/。