如何編譯ReactNative樣本程式Examples

標籤：

通過樣本程式可以看到一些基本組件的使用，對於學習ReactNative是很有協助的。

編譯樣本程式需要將整個項目匯入到androidStudio中，androidStudio匯入項目時選擇react-native/ReactAndroid目錄。

由於項目依賴ndk因此如果要編譯Examples還需要安裝配置ndk目錄，下載ndk後是一個自解壓程式，會釋放ndk的目錄。
然後需要設定環境變數或者在react-native根目錄下建立local.properties檔案，檔案內容如下：
sdk.dir=c:\你的sdk目錄
ndk.dir=c:\你的ndk目錄

設定要之後就可以編譯了，匯入和編譯的過程比較曲折，請繼續看下文。

在編譯AwesomeProject項目時，沒有用到ndk，實際上這裡的ndk預設情況下並沒有用到，只是gradle的設定裡有ndk因此必須配置ndk才能匯入項目。

ndk是在編譯核心庫是才用到，核心庫位於react-native/ReactAndroid，匯入整個項目時以lib形式存在。
查看Examples目錄下UIExplorer，會發現在build.gradle是以線上的方式匯入核心庫的。通過源碼的方式匯入被注釋掉了。

dependencies {
compile fileTree(dir: ‘libs‘, include: [‘*.jar‘])
compile ‘com.android.support:appcompat-v7:23.0.1‘

// Depend on pre-built React Native
compile ‘com.facebook.react:react-native:0.11.+‘

// Depend on React Native source.
// This is useful for testing your changes when working on React Native.
// compile project(‘:ReactAndroid‘)
}

由此可知，編譯UIExplorer並不需要ndk，如果你不想設定ndk，有2個辦法

1.拷貝AwesomeProject項目中的build.gradle，settings.gradle到UIExplorer的android目錄，在匯入項目時選擇UIExplorer/android就可以了，這樣androidStudio會匯入單個項目，否則會匯入整個項目。

2.用androidStudio建立一個同名的項目，然後把UIExplorer目錄中的檔案拷貝到建立的項目中。

編譯好之後啟動伺服器端，到react-native目錄下執行:
npm install
node packager\packager.js

windows下如果出現錯誤需要根據錯誤提示修改代碼
http://www.cnblogs.com/zhaojietec/p/4853273.html

不過需要注意的是，目前為止，UIExplorer在Android下有一個bug，IOS下沒有問題，通過google可以找到瞭解決辦法。
https://github.com/facebook/react-native/issues/2855

原因是，js代碼和android原生代碼不同步，通過build.gradle可以看到android下的引用的reactNative核心庫為11，而js代碼版本已經更新到12了。

解決的辦法有2個，一個是使用git工具(如smartGit)，將js代碼恢複到之前的版本，另一個辦法是重新編譯reactNative的核心庫，編譯核心庫需要ndk，在mac下沒有問題，在windows編譯會出錯。
編譯reactNative核心庫，對UIExplorer下注釋掉的依賴項進行修改即可，編譯速度較慢 需要線上下載第三方依賴庫。

dependencies {
compile fileTree(dir: ‘libs‘, include: [‘*.jar‘])
compile ‘com.android.support:appcompat-v7:23.0.1‘

// Depend on pre-built React Native
//compile ‘com.facebook.react:react-native:0.11.+‘

// Depend on React Native source.
// This is useful for testing your changes when working on React Native.
compile project(‘:ReactAndroid‘)
}

由於windows下無法編譯，所以這裡提供編譯好的aar檔案，修改UIExplorer build.gradle中的依賴項就可以了。至於如何引入aar檔案，可以自行搜尋。
當然mac下同樣也可以用這個aar，可以省去不少麻煩。

網盤(要求輸入密碼)：
連結：http://share.weiyun.com/f4460735f3b44a4e79ddc7032d6f95f7

由於本人剛建的公眾號還沒有人關注，因此請關注我的公眾號：zhaojieTec，回複“aar”後擷取密碼。
是的，你沒有看錯，這就是傳說中的隱藏內容請回複查看。

另外網盤中也提供編譯好的loader程式，UIExplorer (ps：facebook真是不厚道為什麼不提供編譯好的程式看一下想過呢)。

 

如何編譯ReactNative樣本程式Examples