第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插件。