轉載請標明出處：

http://blog.csdn.net/developer_jiangqq/article/details/50546194

本文出自:【江清清的博客】

(一)前言

         特別說明:本系列專題文章的系統環境是OS X,如果各位童鞋是Windows的話，出現運行安裝等坑爹問題，還得重新排查解決哦~俗話說學習一樣新東西的時候，例如這邊我們要學React Native的組件使用，那么最好的學習資料就是官方提供的材料了，作作為開發人員最好的學習資料就是源碼，幸好官方給我們提供了UIExplorer項目，這里邊包含React Native的基本所有組件的使用介紹和方法。下面我們來把該項目進行運行起來，不過這邊只暫時使用到Android項目哦~ iOS的部分后期在進行講解吧。請諒解哦~

         剛創建的React Native技術交流群(282693535),歡迎各位大牛,React Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送!

(二)運行APP工作

          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 version23.0.1(build.gradle中buildToolsVersion)

          ③.Android Support Repository>=17

          ④·Andoid NDK需要安裝好

[注]以上第①點到第③點的版本不需要和我這邊一樣，可以根據實際情況走，不過最好是最新版本哦~

       2.3.下面開始下載NDK以及配置

        ①.去官網下載NDK項目(注意KX上網):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） 侵權必究！

       關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)

     關注我的微博，可以獲得更多精彩內容