#
#
轉載請標明出處:
[http://blog.csdn.net/developer_jiangqq/article/details/50546194](http://blog.csdn.net/developer_jiangqq/article/details/50546194)
本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq)
# (一)前言
??????????【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新,請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)?
? ? ? ?特別說明:本系列專題文章的系統環境是OSX,如果各位童鞋是Windows的話,出現運行安裝等坑爹問題,還得重新排查解決哦~俗話說學習一樣新東西的時候,例如這邊我們要學React Native的組件使用,那么最好的學習資料就是官方提供的材料了,作作為開發人員最好的學習資料就是源碼,幸好官方給我們提供了UIExplorer項目,這里邊包含React Native的基本所有組件的使用介紹和方法。下面我們來把該項目進行運行起來,不過這邊只暫時使用到Android項目哦~ iOS的部分后期在進行講解吧。請諒解哦~
???????? 剛創建的React Native技術交流群(282693535),歡迎各位大牛,React Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送!
# (二)運行APP工作
????????? 2.1.React Native項目源碼下載
?????? React Native項目官方地址:[https://github.com/facebook/react-native](https://github.com/facebook/react-native)??我們可以使用如下命令把代碼clone到本地。
~~~
git clone https://github.com/facebook/react-native.git
~~~
具體項目結構如下:

?????? 2.2.Android環境要求如下,請確保你的環境已經達到如下要求:
????????? ①.Android Sdk版本23(在build.gradle中的compileSdkVersion)
????????? ②.SDK build tools version23.0.1(build.gradle中buildToolsVersion)
????????? ③.Android Support Repository>=17
????????? ④·Andoid NDK需要安裝好
[注]以上第①點到第③點的版本不需要和我這邊一樣,可以根據實際情況走,不過最好是最新版本哦~
?????? 2.3.下面開始下載NDK以及配置
??????? ①.去官網下載NDK項目(注意科學上網):[http://developer.android.com/ndk/dowloads/index.html](http://developer.android.com/ndk/dowloads/index.html)

我的系統是OS X,所以下載了Mac版本NDK了(NDK項目名:android-ndk-r10e-darwin-x86_64.bin)。
然后切換到該NDK文件所在目錄運行如下命令進行改變權限以及解壓縮即可了。
~~~
chmod a+x android-ndk-r10e-darwin-x86_64.bin
~~~

接著運行解壓縮命令,進行解壓縮NDK
~~~
./android-ndk-r10e-darwin-x86_64.bin
~~~

??? 2.4.react-native項目中添加local.properties文件,其中配置一下Android SDK和Android NDK的路徑即可。
我們在clone出來的react-native項目的根目錄創建local.properties文件,文件中添加信息如下:

[注]以上里面的路徑信息根據我本機的路徑走得,實際情況還要看各位的SDK和NDK的路徑。
?? 2.5.添加Node依賴模塊:該命令行需要切到react-native項目中,主要運行如下命令
~~~
cd react-native
~~~
以及
~~~
npm install
~~~
這樣就添加了Node_Modules模塊(其中包含了react-native核心庫)
?? 2.6.運行相應Demo(這邊主要演示UIExplorer項目,其他項目運行方法相似)
以上的步驟大家如果已經全部走完了之后,下面運行如下命令進行編譯安裝即可:
~~~
./gradlew :Example:UIExplorer:android:app:installDebug
~~~


接著運行如下命令帶起服務器,然后點擊打開模擬器中的APP
~~~
./packager/packager.sh
~~~

最終運行效果如下:

??????? 上面我們完成了react-native基礎UI組件實例項目的運行,對于其他Demo,例如Movies,其實方法差不多的,大家可以測試一下,舉例如下:
~~~
./gradlew :Examples:Movies:android:app:installDebug
~~~
# (三)最后總結
????????? 今天我們主要給大家介紹了運行react-native項目中實例項目,例如UIExplorer項目,該里面包含了基本所有的組件的使用方式,而且介紹的非常詳細對于初學者來說,就是很好的學習入門的知識,也希望大家都能部署調試起來。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。?
? ? ? ?尊重原創,轉載請注明: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)