來分享一下編譯 React Native Android 所遇到的一些坑。
編譯需求
項目初步試水React Native中,第一個緊要問題就是如何將項目引入到 Native項目中。
主流的方法可能就是按官方的做法,引入react native
的依賴包.
但這樣會存在幾個問題:
- 引入React Native后,項目增大了7M ,所以我們需要精簡包
- React Native 的包結構目錄包括了 android的工程目錄的,所以android得工程目錄能引用到node_module目錄,但成型的項目包結構已經固定,就是android目錄直接存放在git上了。所以 我們需要切斷Android與node_modules的耦合。
編譯后給項目帶來的好處
- APK 包只增加了5M
- 更好地將React Native融入到現有的項目
編譯
官方給出的方式是這樣的
npm install --save github:facebook/react-native#master
反正我是通過這種方式下載不了的。
導入ReactAndroid
還好在node_modules目錄下就已經存在了一個ReactAndroid
目錄,使用Android Studio ,通過import Modules
找到node_modules/react-native/ReactAndroid
文件夾引入源碼.
移動ReactCommon 文件夾
再導入后,你還需要將node_modules/react-native/ReactCommon文件夾也移動到 項目的ReactAndroid目錄下,這樣ReactAndroid就徹底解耦了.
修改ReactCommon 在項目中的地址
找到ReactAndroid的build.gradle文件,找到ReactCommon所在的地方,更換ReactCommon的地址為:
"REACT_COMMON_DIR=$projectDir/ReactCommon",
將ReactAndroid 作為類庫調用
在項目的入口module的build.gradle中加入
compile project(':ReactAndroid')
可能遇到的問題
NDK 報錯
Error:Execution failed for task buildReactNdkLib
遇到這個問題,先看NDK環境是否配置好,在Android Studio的File功能欄中找到Project Structure
,看看是否填好了Android NDK Location
.
如果已經填入,請確定是否裝的是 NDK-r10e版本
,如果填入了別的版本,也是編譯不了。
該NDK版本可以從官方下載: http://facebook.github.io/react-native/docs/android-building-from-source.html
下載好后,在Project Structure中指定就好了.
示例:
build 很慢
然后Android Studio 就會一直在build
,運氣好一點,十分鐘就結束了,運氣不好,可能永遠都停不下來了。
這個時候,你需要找到ReactAndroid
的build.gradle
文件。
在這里面有多個下載的地址,所以build
都是進行下載。
boost_1_57_0.zip
這個壓縮包是最大的,最好用http://mirror.nienbo.com/boost/boost_1_57_0.zip
這個地址替換https://downloads.sourceforge.net/project/boost/boost/1.57.0/boost_1_57_0.zip
就會快很多。
PS: 萬一build停不下來,你就只能強制退出Android Studio,然后再開啟,修改地址后再build.
找不到so文件
java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so
遇到這種情況,首先應該嘗試 重新編譯Rebuild
編譯不通過,則需要檢查 應用的build.gradle。標準的文件應該是這樣的:
apply plugin: 'com.android.application'
apply from: "../react.gradle"
def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false
android {
compileSdkVersion 24
buildToolsVersion "24.0.1"
defaultConfig {
applicationId "com.example.testreact"
minSdkVersion 16
targetSdkVersion 24
versionCode 1
versionName "1.0"
ndk {
abiFilters "armeabi-v7a", "x86"
}
}
splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false // If true, also generate a universal APK
include "armeabi-v7a", "x86"
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
def versionCodes = ["armeabi-v7a":1, "x86":2]
def abi = output.getFilter(com.android.build.OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
}
}
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:24.1.1'
compile project(':ReactAndroid')
}
clean與build 問題
我們都知道,在Android 在執行clean操作后,build文件夾下的文件將會被清除。但上面講到,在ReactAndroid的項目中,它會把文件下載到build/download
文件下,我們應該防止每次都需要重新下載.
首先,將ReactAndroid/build/react-ndk 文件夾移動到ReactAndroid項目下,
再找到 ReactAndroid下的build.gradle,里面有個sourceSets.main
,將第二行修改成這樣
jniLibs.srcDir "react-ndk/exported"
這樣,jni的文件夾就被移動到ReactAndroid的項目下了,而不會每次打包都需要下載。而且可以直接上傳到git,別人再下載該項目就不用 下載文件了。
PS: clean 操作還會報 Android.mk Stop 的錯誤,刪除
clean.dependsOn cleanReactNdkLib
這一行就好了.
本人的ReactAndroid目錄下build.grald
// Copyright 2015-present Facebook. All Rights Reserved.
apply plugin: 'com.android.library'
apply plugin: 'maven'
android {
compileSdkVersion 23
buildToolsVersion "23.0.1"
defaultConfig {
minSdkVersion 16
targetSdkVersion 22
versionCode 1
versionName "1.0"
ndk {
moduleName "reactnativejni"
}
buildConfigField 'boolean', 'IS_INTERNAL_BUILD', 'false'
buildConfigField 'int', 'EXOPACKAGE_FLAGS', '0'
testApplicationId "com.facebook.react.tests.gradle"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
sourceSets.main {
jni.srcDirs = []
jniLibs.srcDir "react-ndk/exported"
res.srcDirs = ['src/main/res/devsupport', 'src/main/res/shell', 'src/main/res/views/modal']
java {
srcDirs = ['src/main/java', 'src/main/libraries/soloader/java', 'src/main/jni/first-party/fb/jni/java']
exclude 'com/facebook/react/processing'
}
}
lintOptions {
abortOnError false
}
packagingOptions {
exclude 'META-INF/NOTICE'
exclude 'META-INF/LICENSE'
}
}
dependencies {
compile fileTree(dir: 'src/main/third-party/java/infer-annotations/', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:recyclerview-v7:23.0.1'
compile 'com.facebook.fresco:fresco:0.11.0'
compile 'com.facebook.fresco:imagepipeline-okhttp3:0.11.0'
compile 'com.facebook.soloader:soloader:0.1.0'
compile 'com.fasterxml.jackson.core:jackson-core:2.2.3'
compile 'com.google.code.findbugs:jsr305:3.0.0'
compile 'com.squareup.okhttp3:okhttp:3.4.1'
compile 'com.squareup.okhttp3:okhttp-urlconnection:3.4.1'
compile 'com.squareup.okhttp3:okhttp-ws:3.4.1'
compile 'com.squareup.okio:okio:1.9.0'
compile 'org.webkit:android-jsc:r174650'
testCompile "junit:junit:${JUNIT_VERSION}"
testCompile "org.powermock:powermock-api-mockito:${POWERMOCK_VERSION}"
testCompile 'com.fasterxml.jackson.core:jackson-databind:2.2.3'
testCompile "org.powermock:powermock-module-junit4-rule:${POWERMOCK_VERSION}"
testCompile "org.powermock:powermock-classloading-xstream:${POWERMOCK_VERSION}"
testCompile "org.mockito:mockito-core:${MOCKITO_CORE_VERSION}"
testCompile "org.easytesting:fest-assert-core:${FEST_ASSERT_CORE_VERSION}"
testCompile "org.robolectric:robolectric:${ROBOLECTRIC_VERSION}"
androidTestCompile 'com.android.support.test:runner:0.3'
androidTestCompile "org.mockito:mockito-core:${MOCKITO_CORE_VERSION}"
}
apply from: 'release.gradle'
這樣,編譯好后,整個項目都在自己手上了,就可以很方法進行一些改動。