轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50661981](http://blog.csdn.net/developer_jiangqq/article/details/50661981) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言 ? ? ? ? ?【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)?????? ? ? ? ? ?特別說明:群里很多童鞋都在說想Windows系統官方實例，但是官方提供的文檔以及網上的例子都是OS X版本。今天特意給大家更新一下Windows版本運行官方 實例(UIExporler)全過程。俗話說學習一樣新東西的時候，例如這邊我們要學React Native的組件使用，那么最好的學習資料就是官方提供的材料了，作作為開發人員最好的學習資料就是源碼，幸好官方給我們提供了UIExplorer項目，這里邊包含React Native的基本所有組件的使用介紹和方法。下面我們來把該項目進行運行起來，不過這邊只暫時使用到Android項目哦~ iOS的部分后期在進行講解吧。請諒解哦~ 剛創建的React Native技術交流1群(282693535),React Native交流2群:(496601483)，請不要重復加群！歡迎各位大牛,React Native技術愛好者加入交流!同時博客右側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! [關于React Native各種疑難雜癥,問題深坑總結方案請點擊查看:](http://www.lcode.org/react-native%E7%96%91%E9%9A%BE%E7%82%B9%E9%97%AE%E9%A2%98%E6%B7%B1%E5%9D%91%E6%9C%80%E5%BC%BA%E6%80%BB%E7%BB%93%E5%B8%96%E4%B8%8D%E6%96%AD%E6%9B%B4%E6%96%B0%E4%B8%AD/) [Mac OS X版本編譯運行官方實例請點擊查看:](http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E9%85%8D%E7%BD%AE%E8%BF%90%E8%A1%8C%E5%AE%98%E6%96%B9%E4%BE%8B%E5%AD%90-%E5%88%9D%E5%AD%A6%E8%80%85%E7%9A%84%E7%A6%8F%E9%9F%B38/) # (二)運行APP工作 【注意】本文章的前置條件，需要你Windows環境正確安裝了React Native環境:點擊進入Windows系統安裝配置React Native教程。 ## 2.1.React Native項目源碼下載 ~~~ git?clone?https://github.com/facebook/react-native.git ~~~ 具體項目結構如下: ? ## 2.2.Android環境要求如下，請確保你的環境已經達到如下要求: * ①.Android Sdk版本23(在build.gradle中的compileSdkVersion) * ②.SDK build tools version 23.0.1(build.gradle中buildToolsVersion) * ③.Android Support Repository>=17 * ④·Andoid NDK需要安裝以及配置 * ⑤·Cygwin安裝 [注]以上第①點到第③點的版本不需要和我這邊一樣，可以根據實際情況走，不過最好是最新版本哦~ ## 2.3.下載安裝cygwin軟件 根據官方提供的文檔我們需要執行類似于./packager/packager.sh這樣的shell腳本，普通的Windows系統是無法執行這樣的腳本的。所以我們的Windows系統可以下載安裝cygwin之后就可以執行shell腳本啦。下載地址:[https://www.cygwin.com/](https://www.cygwin.com/)去下載對應的版本即可了。 ? 下載完成開始安裝: ? 選擇從網絡(Internet)進行安裝，點擊下一步: ? 安裝路徑盡量采用英文(不要中文),然后默認選擇下一步就行了.  選擇下載的鏡像:  這一步，我們選擇需要下載安裝的組件包，為了使我們安裝的Cygwin能夠編譯程序，我們需要安裝gcc編譯 器，默認情況下，gcc并不會被安裝，我們需要選中它來安裝。為了安裝gcc，我們用鼠標點開組件列表中的“Devel”分支，在該分支下，有很多組件， 我們必須的是： 1. binutils 2. gcc 3. gcc-mingw 4. gdb  需要安裝的組件選擇完成之后開始下一步組件安裝啦~  最終安裝組件完成  下面我們在系統環境變量PATH中添加我們cygwin的bin目錄這樣我們就可以通過命令行界面直接使用bash進入cygwin環境啦~  配置完成之后，重啟命令行終端，然后敲入bash命令進入如下界面，就代表OK了  ## 2.4.下載安裝NDK然后安裝以及配置 因為官方的實例是需要進行安裝配置NDK的，所以大家需要去官方網站進行下載(請注意科學上網)[http://developer.android.com/ndk/dowloads/index.html](http://developer.android.com/ndk/dowloads/index.html)? 大家下載自己系統對應的版本即可。下載成功之后解壓縮，然后環境變量創建ANDROID_NDK配置一下即可  ## 2.5.添加Node依賴模塊:該命令行需要切到react-native項目中,主要運行如下命令 ~~~ cd?react-native ~~~ 以及 ~~~ 1. npm?install ~~~ 這樣就添加了node_modules模塊(其中包含了react-native核心庫) 突然運行發現錯誤了:  這個是npm的版本問題，該npm2的版本不支持windows系統，所以我們需要進行升級。 首先通過npm version查看當前的版本,然后升級到指定版本([npm升級方法點擊進入](http://jingyan.baidu.com/article/ac6a9a5e60a44f2b653eac85.html))  升級成功如下:  然后復制C:\Users\{你的Windows用戶名}\AppData\Roaming\npm\node_modules\npm下的文件到你的 NodeJS安裝目錄下的 \node_modules\npm 中，覆蓋掉原有的全部文件； 接下來重新在剛剛react-native中運行npm install命令即可. 有預感的還是出現錯誤啦!  出現錯誤發現我們電腦沒有安裝python模塊，有些童鞋這個錯誤可能不會出現的~那我們繼續開始安裝python模塊吧。 下載地址:[?https://www.python.org/downloads/release/python-278/](https://www.python.org/downloads/release/python-278/) 大家根據自己的電腦系統以及版本進行下載安裝吧 【特別注意】python版本請選擇2.5-3.0之間的版本哦~  下載安裝配置一下環境變量即可  然后打開命令行執行python,看到如下信息就成功安裝python了  上面這些支持項已經全部安裝了，下載切換到rect-native項目重新執行npm install開始添加mode模塊吧  ## 2.6.開始編譯官方實例UIExploerer項目 打開之前安裝的cygwin終端，切換到當前react-native項目中。注意切換路徑方法以實際項目路徑為準  運行如下命令開始編譯安裝我們的官方實例 ~~~ ./gradlew?:Example:UIExplorer:android:app:installDebug ~~~  這邊花的時間要看網絡情況的，有時候速度會非常慢，等大家耐心等待~ 接下來就是最關鍵的一步啦~執行如下命令進行打包啟動服務. **[html]**?[view plain](http://blog.csdn.net/developer_jiangqq/article/details/50661981# "view plain")?[copy](http://blog.csdn.net/developer_jiangqq/article/details/50661981# "copy")?[](https://code.csdn.net/snippets/1578015 "在CODE上查看代碼片")[](https://code.csdn.net/snippets/1578015/fork "派生到我的代碼片") 1. ./packager/packager.sh??  OK這樣我的服務已經啟動起來，大家只需要去設備中點擊打開APP即可 最后我們來看一下官方實例UIExplorer的運行效果  # (三)最后總結 ? ? ? ? 今天主要給大家演示一下Windows版本編譯運行React Native官方實例UIExplorer項目，至于其他幾個實例只要把命令改一下就行了，各位童鞋舉一反三吧。 ? ? ? ?尊重原創，轉載請注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)） 侵權必究！ ? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)  ? ? ?關注我的微博，可以獲得更多精彩內容 ? ? ??[](http://weibo.com/u/1855428195?s=6uyXnP)