將React Native集成至Android原生應用
Android Studio 2.1 Preview 4生成的空項目
react-native 環境 0.22.2
初次編譯后apk有1.1M,還算可以接受。 默認依賴的lib如下圖所示:
1.app/build.gradle里添加如下代碼:
compile 'com.facebook.react:react-native:0.20.+'
再次編譯后apk竟然有10.3M,太誇張了,我們來看看倒底都是什么占用了這么大的空間,仔細看一下其中包含:
我們一起來認識一下這個庫是起什么作用的:
- android-jsc-r174650:Android 里的 jsc 引擎
- appcompat-v7-23.0.1:appcompat v7 支持庫
- bolts-android-1.1.4:Facebook 開發的 Android 的底層庫集合,主要是處理 Task
- drawee-0.8.1:fresco 控件中的一個負責顯示的底層庫,包含在 fresco 里
- fbcore-0.8.1:Facebook 內核庫
- fresco-0.8.1:Facebook 開發的一款強大的 Android 圖片處理庫
- imagepipeline-0.8.1:負責完成加載圖片(網絡、本地文件,本地資源),包含在fresco里
- imagepipeline-okhttp-0.8.1:負責完成加載圖片前的網絡請求,包含在 fresco 里
- jackson-core-2.2.3:負責處理 JSON 數據
- jsr-305:供檢查軟件缺陷用的注解
- library-2.4.0:nineoldandroids 開源動畫庫
- okhttp-2.5.0:強大的網絡請求庫
- okhttp-ws-2.5.0:okhttp 的 web sockets 功能庫
- okio-1.5.0:Square 公司開發的補充 java.io 和 java.nio 的不足,用於更加方便,快速的訪問、存儲和處理你的數據
- react-native-0.20.1:react native 庫,上面和下面這些庫都是被帶進來的 :)
- recyclerview-v7-23.0.1:Android 5.0 v7 RecyclerView 擴展庫
- stetho-1.2.0:Facebook 開發的 Chrome Developer 工具,用來調試React Native程序
- stetho-okhttp-1.2.0:stetho 的網絡請求支持庫
- support-annotations-23.0.1:幫助 Android Studio 檢測代碼中可能存在的錯誤
- support-v4-23.0.1:Android v4 支持庫
如果原Android項目應用了這些插件,那恭喜你,可以復用了,反之就要算辦法精減(我也還在研究)。
2.在MainActivity里添加跳轉至ReactNativeActivity的代碼(模擬業務場景)
3.添加ReactNativeActivity頁面,向里面添加代碼(官網那些代碼太老了,這個版本是最曼妙的)
4.向AndroidManifest.xml里添加 .ReactNativeActivity 和 com.facebook.react.devsupport.DevSettingsActivity
5.拷貝如下文件夾及文件到Android項目根目錄
-
node_modules(文件夾。從之前 init React Native 項目里拷一份過來。因為 npm install 成功率很低,就算是用taobao的源,也很慢)
-
.flowconfig (JavaScript 靜態類型檢查工具配置文件)
-
.watchmanconfig(Facebook 開發的用來監視文件並且記錄文件的改動情況,當文件變更就觸發一些操作, 如:Enable Live Reload的功能)
-
index.android.js(文件。操作方式同上,注意 class 名稱與下面 register 時名稱要一致)
-
package.json(文件。操作方式同上,注意文件內容里的 name 和 react-native 版本號)
6.修改如下文件
-
.gitignore(在該文件里添加排除項,node_modules/ 和 npm-debug.log)
-
app/build.gradle (將 'com.android.support:appcompat-v7:23.2.1' 改為 'com.android.support:appcompat-v7:23.0.1')
-
gradle.properties (在文件末尾添加,android.useDeprecatedNdk=true)
注意:小坑一個,如果遇到。請按第6項修改,並且要保證 react-native 版本是0.21.0以上
歪果朋友也深受其害,https://github.com/facebook/react-native/issues/6152#issuecomment-200759453
java.lang.IllegalAccessError: Method 'void android.support.v4.net.ConnectivityManagerCompat.()' is inaccessible to class 'com.facebook.react.modules.netinfo.NetInfoModule' (declaration of 'com.facebook.react.modules.netinfo.NetInfoModule' appears in /data/app/package.name-2/base.apk)
at com.facebook.react.modules.netinfo.NetInfoModule.(NetInfoModule.java:55)
at com.facebook.react.shell.MainReactPackage.createNativeModules(MainReactPackage.java:62)
at com.facebook.react.ReactInstanceManagerImpl.processPackage(ReactInstanceManagerImpl.java:751)
at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:688)
at com.facebook.react.ReactInstanceManagerImpl.access$600(ReactInstanceManagerImpl.java:84)
代碼地址:https://github.com/Kennytian/embedded,歡迎star