如何編譯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真是不厚道為什么不提供編譯好的程序看一下效果呢)。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM