来分享一下编译 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'
这样,编译好后,整个项目都在自己手上了,就可以很方法进行一些改动。