轉載請標明出處:
[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)
- 前言
- React Native For Android環境配置以及第一個實例(1)
- React Native開發IDE安裝及配置(2)
- React Native應用設備運行(Running)以及調試(Debugging)(3)
- React Native移植原生Android項目(4)
- React Native進行簽名打包成Apk(5)
- React Native庫版本升級(Upgrading)與降級講解(6)
- React Native控件之View視圖講解(7)
- React Native配置運行官方例子-初學者的福音(8)
- React Native控件之Text組件講解(9)
- React Native控件之Image組件講解與美團首頁頂部效果實例(10)
- TextInput組件講解與QQ登錄界面實現(11)
- ProgressBarAndroid進度條講解(12)
- DrawerLayoutAndroid抽屜導航切換組件講解(13)
- ScrollView組件講解(14)
- ToolbarAndroid工具欄控件講解以及使用(15)
- Switch開關與Picker選擇器組件講解以及使用(16)
- ViewPagerAndroid講解以及美團首頁頂部效果實例(17)
- Touchable*系列組件詳解(18)
- React Native專題文章講解,不斷更新中.....
- ListView組件講解以及最齊全實例(19)
- 超詳細Windows版本編譯運行React Native官方實例UIExplorer項目(多圖慎入)
- React Native超棒的LayoutAnimation(布局動畫)
- PullToRefreshViewAndroid下拉刷新組件講解(20)
- RefreshControl組件詳解(21)
- WebView組件詳解以及實例使用(22)