《React Native 精解與實戰》書籍連載「配置 iOS 與 Android 開發環境」

此文是我的出版書籍《React Native 精解與實戰》連載分享，此書由機械工業出版社出版，書中詳解了 React Native 架構底層原理、React Native 組件布局、組件與 API 的介紹與代碼實戰，以及 React Native 與 iOS、Android 平台的混合開發底層原理講解與代碼實戰示範，精選了大量執行個體代碼，方便讀者快速學習。

書籍還配套了視頻教程「80 節實戰課精通 React Native 開發」，此視頻課程建議配合書籍學習，書籍中原理性的東西講解的比較清晰，而視頻教程對於組件、API 等部分的代碼實戰開發講解比較直觀。

書籍相關所有資料請訪問：http://rn.parryqiu.com

本章將介紹在開發前的一些準備工作，包括 iOS 和 Android 的開發與調試環境的搭建，並對 React Native 中的一些調試屬性做一些說明，介紹 Chrome 遠端偵錯代碼的技巧，以及 React Developer Tools 工具的安裝與應用。

5.1 配置 iOS 開發環境

首先我們需要配置 iOS 平台的開發環境（只可以在 Mac 系統下進行 iOS 平台應用的開發），Apple 為開發人員提供了非常易用、強大、環境整合的開發工具 Xcode，用於開發基於 iPhone、iPad、Apple Watch 以及 Mac 平台的應用程式。
Xcode 開發工具提供了開發、測試、打包以及整個項目發布上架的功能，這些操作都可以在 Xcode 中完成，是 Mac 下真正的一站式開發工具。
下面介紹並示範 iOS 開發環境的基本安裝與運行項目進行調試的過程。

1. 開啟 App Store 搜尋 Xcode，點擊安裝後等待下載完畢並自動完成安裝， 5-1 所示。

圖 5-1 Xcode 的安裝

1. 使用 Xcode 開啟項目，這裡我們直接開啟課程配套源碼檔案夾中的 02-02-02 檔案夾，此項目為本書第二章中建立的初始化項目，找到檔案夾中的 /HelloReact/ios/HelloReact.xcodeproj 開啟，xcodeproj 尾碼的檔案為 Xcode 的專案檔， 5-2 所示。

圖 5-2 使用 Xcode 開啟 iOS 項目

1. 選擇對應的模擬器後，點擊運行按鈕即可啟動項目，首先 React Native 會啟動一個 React Packager 用於將源碼打包成 bundle js 檔案，並用於後期調試時的 Live Reload 以及 Hot Reloading 使用， 5-3 所示。
   在 JavaScript 打包完成後，模擬器會自動啟動並自動運行對應的 App， 5-4 所示。

圖 5-3 React Packager 控制台

圖 5-4 選擇模擬器並運行項目

1. iOS App 啟動後的效果 5-5 所示。

圖 5-5 iOS 項目啟動效果

修改項目 App.js 源碼中的第 6 行代碼，從初始化項目中的 Welcome to React Native 修改成 Hello React Native，儲存後並在模擬器中使用快速鍵 Command + R 進行重新整理，React Packager 控制台會自動重新打包，iOS App 介面立即進行了自動重新整理， 5-6 與 圖 5-7所示。

1.  export default class App extends Component<{}> {  2.    render() {  3.      return (  4.        <View style={styles.container}>  5.          <Text style={styles.welcome}>  6.            Welcome to React Native!  7.          </Text>  8.          <Text style={styles.instructions}>  9.            To get started, edit App.js  10.         </Text>  11.         <Text style={styles.instructions}>  12.           {instructions}  13.         </Text>  14.       </View>  15.     );  16.   }  17. }  

圖 5-6 React Packager 自動重新打包

圖 5-7 App 介面自動重新整理

5.2 配置 Android 開發環境

Android Studio 是一個為 Android 平台開發應用程式的整合式開發環境。2013 年 5 月 16 日在Google I/O 上發布，可供開發人員免費使用。Android Studio 基於 JetBrains IntelliJ IDEA，為 Android 開發特殊定製，並在 Windows、mac OS 和 Linux 平台上均可運行。
Android Studio 的功能非常豐富，其主要具備的特點如下：

• 可視化布局：WYSIWYG 編輯器、即時編碼、即時程式介面預覽；
• 開發人員控制台：最佳化提示、協助翻譯、來源跟蹤、宣傳和營銷曲線圖；
• Beta 版本測試，並階段性展示；
• 基於 Gradle 的構建支援；
• Android 特定代碼重構和快速修複；
• Lint 提示工具更好地對程式效能、可用性、版本相容和其他問題進行控制捕捉；
• 支援 ProGuard 和應用簽名功能；
• 基於模板的嚮導來產生常用的 Android 應用設計和組件；
• 內建布局編輯器，可讓開發人員拖放 UI 組件，並預覽在不同尺寸裝置上的 UI 顯示效果等等；
• 支援構建 Android Wear 應用；
• 內建 Google Cloud Platform 支援，支援 Google Cloud Messaging 和 App Engine 的整合。

下面介紹並示範 Android Studio 開發環境的基本安裝與測試回合項目的過程。
1.官網下載並安裝 Android Studio 開發工具，並下載配置好對應的 Java SDK。官網地址為：developer.android.com/studio/index.html。

2.下載並完成安裝後，開啟 Android Studio 找到右側的 Import project，匯入 02-02-02 專案檔夾中的 /HelloReact/android/ 檔案夾， 5-8 所示。

圖 5-8 匯入 Android 項目

3.在匯入 Android 項目後，Android Studio 會自動載入對應版本的 Gradle 進行項目的構建，此過程根據你的網路狀況，可能耗時較長。項目自動構建完成後， 5-9 所示。

圖 5-9 Android Studio 項目開啟

4.在項目完成 Gradle 構建後，啟動 Android Studio 內建的 Android 模擬器，並點擊啟動按鈕，開始項目的編譯並自動完成項目在模擬器中的調試運行。同樣，此過程 React Native 會自動啟動 React Packager 進行源碼的打包並供後期調試時的 Live Reload 以及 Hot Reloading 使用。執行過程分別 5-10 與 圖 5-11 所示。

圖 5-10 Android 環境下的 React Packager

圖 5-11 Android 模擬器執行效果