# # 轉載請標明出處： [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)