超詳細Windows版本編譯執行React Native官方例項UIExplorer專案(多圖慎入)
轉載請標明出處：
(一)前言
【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org
特別說明:群裡很多童鞋都在說想Windows系統官方例項，但是官方提供的文件以及網上的例子都是OS X版本。今天特意給大家更新一下Windows版本執行官方 例項(UIExporler)全過程。俗話說學習一樣新東西的時候，例如這邊我們要學React Native的元件使用，那麼最好的學習資料就是官方提供的材料了，作作為開發人員最好的學習資料就是原始碼，幸好官方給我們提供了UIExplorer專案，這裡邊包含React Native的基本所有元件的使用介紹和方法。下面我們來把該專案進行執行起來，不過這邊只暫時使用到Android專案哦~ iOS的部分後期在進行講解吧。請諒解哦~
(二)執行APP工作
【注意】本文章的前置條件，需要你Windows環境正確安裝了React Native環境:點選進入Windows系統安裝配置React Native教程。
2.1.React Native專案原始碼下載
React Native專案官方地址:https://github.com/facebook/react-nativegit 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/去下載對應的版本即可了。
下載完成開始安裝:
選擇從網路(Internet)進行安裝，點選下一步:
安裝路徑儘量採用英文(不要中文),然後預設選擇下一步就行了.
選擇下載的映象:
這一步，我們選擇需要下載安裝的元件包，為了使我們安裝的Cygwin能夠編譯程式，我們需要安裝gcc編譯 器，預設情況下，gcc並不會被安裝，我們需要選中它來安裝。為了安裝gcc，我們用滑鼠點開元件列表中的“Devel”分支，在該分支下，有很多元件， 我們必須的是：
- binutils
- gcc
- gcc-mingw
- gdb
需要安裝的元件選擇完成之後開始下一步元件安裝啦~
最終安裝元件完成
下面我們在系統環境變數PATH中新增我們cygwin的bin目錄這樣我們就可以通過命令列介面直接使用bash進入cygwin環境啦~
配置完成之後，重啟命令列終端，然後敲入bash命令進入如下介面，就代表OK了
2.4.下載安裝NDK然後安裝以及配置
因為官方的例項是需要進行安裝配置NDK的，所以大家需要去官方網站進行下載(請注意科學上網)http://developer.android.com/ndk/dowloads/index.html 大家下載自己系統對應的版本即可。下載成功之後解壓縮，然後環境變數建立ANDROID_NDK配置一下即可
2.5.新增Node依賴模組:該命令列需要切到react-native專案中,主要執行如下命令
cd react-native以及
?npm install這樣就添加了node_modules模組(其中包含了react-native核心庫)
突然執行發現錯誤了:
這個是npm的版本問題，該npm2的版本不支援windows系統，所以我們需要進行升級。
首先通過npm version檢視當前的版本,然後升級到指定版本(npm升級方法點選進入)
升級成功如下:
然後複製C:\Users\{你的Windows使用者名稱}\AppData\Roaming\npm\node_modules\npm下的檔案到你的 NodeJS安裝目錄下的 \node_modules\npm 中，覆蓋掉原有的全部檔案；
接下來重新在剛剛react-native中執行npm install命令即可.
有預感的還是出現錯誤啦!
出現錯誤發現我們電腦沒有安裝python模組，有些童鞋這個錯誤可能不會出現的~那我們繼續開始安裝python模組吧。
大家根據自己的電腦系統以及版本進行下載安裝吧
【特別注意】python版本請選擇2.5-3.0之間的版本哦~
下載安裝配置一下環境變數即可
然後開啟命令列執行python,看到如下資訊就成功安裝python了
上面這些支援項已經全部安裝了，下載切換到rect-native專案重新執行npm install開始新增mode模組吧
2.6.開始編譯官方例項UIExploerer專案
開啟之前安裝的cygwin終端，切換到當前react-native專案中。注意切換路徑方法以實際專案路徑為準
執行如下命令開始編譯安裝我們的官方例項
./gradlew :Example:UIExplorer:android:app:installDebug
這邊花的時間要看網路情況的，有時候速度會非常慢，等大家耐心等待~
接下來就是最關鍵的一步啦~執行如下命令進行打包啟動服務.
./packager/packager.sh
OK這樣我的服務已經啟動起來，大家只需要去裝置中點選開啟APP即可
最後我們來看一下官方例項UIExplorer的執行效果
(三)最後總結
今天主要給大家演示一下Windows版本編譯執行React Native官方例項UIExplorer專案，至於其他幾個例項只要把命令改一下就行了，各位童鞋舉一反三吧。
關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),專案管理以及部落格文章!(歡迎關注，第一時間推送精彩文章)
關注我的微博，可以獲得更多精彩內容
