此文是我的出版書籍[《React Native 精解與實戰》](http://rn.parryqiu.com/)連載分享，此書由機械工業出版社出版，書中詳解了 React Native 框架底層原理、React Native 組件佈局、組件與 API 的介紹與代碼實戰，以及 React Native... ...
此文是我的出版書籍《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 開發環境的基本安裝與運行項目進行調試的過程。
- 打開 App Store 搜索 Xcode，點擊安裝後等待下載完畢並自動完成安裝，如圖 5-1 所示。
圖 5-1 Xcode 的安裝
- 使用 Xcode 打開項目，這裡我們直接打開課程配套源碼文件夾中的 02-02-02 文件夾，此項目為本書第二章中建立的初始化項目，找到文件夾中的 /HelloReact/ios/HelloReact.xcodeproj 打開，xcodeproj 尾碼的文件為 Xcode 的項目文件，如圖 5-2 所示。
圖 5-2 使用 Xcode 打開 iOS 項目
- 選擇對應的模擬器後，點擊運行按鈕即可啟動項目，首先 React Native 會啟動一個 React Packager 用於將源碼打包成 bundle js 文件，並用於後期調試時的 Live Reload 以及 Hot Reloading 使用，如圖 5-3 所示。
在 JavaScript 打包完成後，模擬器會自動啟動並自動運行對應的 App，如圖 5-4 所示。
圖 5-3 React Packager 控制台
圖 5-4 選擇模擬器並運行項目
- 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。官網地址為：https://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 模擬器執行效果
