1. 程式人生 > >ZhiHuDaily-React-Native編譯

ZhiHuDaily-React-Native編譯

知乎日報的github地址:https://github.com/15527822118/ZhiHuDaily-React-Native
如果reactnative命令一直出現版本錯誤就呼叫nvm install node && nvm alias default node更新node的版本
node更新到4.0版本的命令:curl https://raw.github.com/creationix/nvm/v0.4.0/install.sh | sh
使nvm更新的結果生效~/.nvm
修改local.properties的sdk.dir沒有用就使用export ANDROID_HOME=/usr/local/eclipse/adt-bundle-linux-x86_64/sdk.
首先android下面的build.gradle依賴的classpath配置成com.android.tools.build:gradle:1.2.3
android/app/build.gradle編譯的sdk版本配置成23,buildtool版本配置成23.0.1,然後下載support-v4的23.0.1版本放在/opt/sdk/extras/android/m2repository/com/android/support/support-v4目錄下面。
appcompat-v7放在/opt/sdk/extras/android/m2repository/com/android/support/appcompat-v7目錄下面。
android ndk的版本要配置成r10的,這樣才能夠正確的編譯。
編譯命令如下:npm install安裝node modules,然後使用react-native run-android安裝到裝置上面。

react-native專案匯入android-studio中只要將android目錄匯入,然後在命令列中執行react-native start即可。

問題:
使用react-native init hello新建一個react專案,在index.android.js裡面新增需要顯示的內容,在package.json檔案中新增的scripts裡面新增”bundle-android”: “react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/build/intermediates/assets/debug/index.android.bundle –sourcemap-output android/app/build/intermediates/assets/index.android.map –assets-dest android/app/build/intermediates/res/”生成相應的bundle檔案,不然就無法呼叫到js檔案,螢幕變成白色。

react-native需要學習的前段知識有javascript,react,component,state,props,require的原理等。後端知識要學node。
require(x)原始碼的執行過程:var React = require(‘react-native’)的作用就是匯入node_modules/react-native/Libraries/react-native/react-native.js這個檔案,同理,require(x)原始碼的執行過程是:(1)如果x是內建模組,a返回該模組,b不再繼續執行;(2)如果x以“./”或者”/”或者”../”開頭,a根據x所在的父模組,確定x的絕對路徑,b將x當成檔案,(x x.js x.json x.node),c將x當成目錄(x/package.json x/index.js x/index.json x/index.node);(3)如果x不帶路徑,a根據x所在的父模組,確定x可能的安裝目錄,b依次在每個目錄中,將x當成檔名或目錄名載入。(4)返回找不到。

java層與javascript層的聯絡
(1)首先繼承ReactContextBaseJavaModule類,比如xmodule,實現它的getName方法比如返回”x”,可以在類裡面新增其他的方法比如getresult;
(2)將xmolue註冊到前面appreactpackage類的creactnativemodules方法中,呼叫modules.add(new xmodule(reactContext)),然後新建x.js檔案,在該檔案中呼叫require(‘react-native’).x可以得到java層的元件,然後在javascript中可以重新建立並初始化該層的元件,建立與java層同樣的函式;
(3)呼叫require(“x”)將該x.js檔案引入y.android.js,就可以呼叫x相關的方法。