本文的前提是你已經(jīng)配置好了React Native的環(huán)境呻粹，還不熟悉的朋友請先移步這里悦施。
說明
本文主要介紹如何編譯并運行React Native的官方DEMO淋纲。對于一門新的技術(shù)或者語言而言竖哩，了解它最直接沮榜、最簡單的方式就是查看官方提供的DEMO庸蔼，首先因為它介紹每個組件缆蝉、API等用法都是比較簡單的示例糙臼，不會像開源項目一樣需要去閱讀大量的代碼庐镐，其次官方的DEMO也是最具有權(quán)威性。
前言
React Native是一種解決方案变逃，使用React去開發(fā)一個原生的APP必逆，官方的描述是這樣的
A framework for building native apps with React.
這里提到了React，它是一個目前最熱門的前端框架，React Native是基于React的名眉，所以建議大家學(xué)習(xí)粟矿，更多的信息請查看這里。這里也為大家整理了幾個學(xué)習(xí)React Native的資料
- http://facebook.github.io/react-native/ 英文官方地址
- http://reactnative.cn/ 中文官方地址
- https://github.com/ele828/react-native-guide 學(xué)習(xí)指南
- http://blog.csdn.net/yuanguozhengjust/article/details/50468561 幾種IDE比較及其他相關(guān)需要的知識（React.js损拢、Node.js）
- http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js菜鳥教程
- http://reactjs.cn/ React.js中文官方網(wǎng)址
正題
看完了上面的介紹陌粹，下面讓我們進(jìn)入本篇文章的正題，我們知道React Native在Github是開源的福压，所以先打開項目的地址
步驟一 下載項目并配置項目依賴
- 下載項目掏秩，本地會生成react-native文件夾
git clone https://github.com/facebook/react-native.git
- 命令行進(jìn)入react-native文件夾，并執(zhí)行npm install (npm是一種js的依賴包管理）
cd react-native && npm install
步驟二 運行examples(Android荆姆，以UIExplorer為例)
- 編譯并運行UIExplorer
gradlew :Examples:Movies:android:app:installDebug
- 啟動packager
cd packager && packager.sh
備注：確保你的手機和電腦處在同一個局域網(wǎng)內(nèi)蒙幻，打開安裝好的UIExplorer App，請點擊Menu->Dev Settings->DEBUGGING->Debug server host & port for device菜單胆筒，設(shè)置電腦所在的局域網(wǎng)地址和端口號邮破，端口號默認(rèn)是8081。
運行效果圖如下
這里我們可以看到各種幾乎與原生UI一致的效果以及用戶體驗仆救，比如ProgressBar（進(jìn)度是動態(tài)的抒和，這里截圖是靜態(tài)的）
其他更多UI的效果以及體驗需要大家自己去查看。
