React Native For Android 源码编译

来分享一下编译 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,运气好一点,十分钟就结束了,运气不好,可能永远都停不下来了。

这个时候,你需要找到ReactAndroidbuild.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'

这样,编译好后,整个项目都在自己手上了,就可以很方法进行一些改动。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容