超詳細Windows版本編譯運行React Native官方實例UIExplorer項目(多圖慎入)
來自： http://www.lcode.org/超詳細windows版本編譯運行react-native官方實例uiexplorer項目多圖慎/
(一)前言
特別說明:群里很多童鞋都在說想Windows系統官方實例，但是官方提供的文檔以及網上的例子都是OS X版本。今天特意給大家更新一下Windows版本運行官方 實例(UIExporler)全過程。俗話說學習一樣新東西的時候，例如這邊我們要學React Native的組件使用，那么最好的學習資料就是官方提供的材料了，作作為開發人員最好的學習資料就是源碼，幸好官方給我們提供了UIExplorer項目，這里邊包含React Native的基本所有組件的使用介紹和方法。下面我們來把該項目進行運行起來，不過這邊只暫時使用到Android項目哦~ iOS的部分后期在進行講解吧。請諒解哦~
剛創建的React Native技術交流群(
282693535
),歡迎各位大牛,React Native技術愛好者加入交流!同時博客右側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送!
關于React Native各種疑難雜癥,問題深坑總結方案請點擊查看:
(二)運行APP工作
【注意】本文章的前置條件，需要你Windows環境正確安裝了React Native環境:點擊進入Windows系統安裝配置React Native教程。
2.1.React Native項目源碼下載
React Native項目官方地址: https://github.com/非死book/react-native 我們可以使用如下命令把代碼clone到本地。
git clone https://github.com/非死book/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的，所以大家需要去官方網站進行下載(請注意KX上網) 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模塊吧。
下載地址: 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
這邊花的時間要看網絡情況的，有時候速度會非常慢，等大家耐心等待~
接下來就是最關鍵的一步啦~執行如下命令進行打包啟動服務.
./packager/packager.sh
OK這樣我的服務已經啟動起來，大家只需要去設備中點擊打開APP即可
最后我們來看一下官方實例UIExplorer的運行效果
(三)最后總結
今天主要給大家演示一下Windows版本編譯運行React Native官方實例UIExplorer項目，至于其他幾個實例只要把命令改一下就行了，各位童鞋舉一反三吧。
尊重原創，轉載請注明：From Sky丶清（ http://www.lcode.org/ ） 侵權必究！
關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)
關注我的微博，可以獲得更多精彩內容
