React Native Android源码编译

编译环境

官方的编译环境要求如下,值得注意的是这里的NDK版本最好是r10e,亲测过其他两个版本的NDK并没有成功,因此这里最好是下载r10e版本的NDK。

  • Android SDK version 23 (编译SDK版本号在build.gradle中可以找到)
  • SDK build tools version 23.0.1(编译工具版本号在build.gradle中可以找到)
  • Android Support Repository >= 17
  • Android NDK r10e下载地址

将Gradle指向你的安卓SDK: 设置$ANDROID_SDK和$ANDORID_NDK为对应的目录,或者按照以下内容在react-native根目录下创建local.properties文件(注意:windows下需要使用反双斜杠)。

sdk.dir=指向android sdk目录的绝对路径  
ndk.dir=指向android ndk目录的绝对路径

例如:

ndk.dir=D\:\\android-ndk-r10e
sdk.dir=C\:\\Users\\AppData\\Local\\Android\\Sdk

获取源码

按照官方给的下面命令获取源码,我试了运行失败。

npm install --save github:facebook/react-native#master

其实当我们 react-native init [ProjectName] 的时候,工程node-modules/react-native/ReactAndroid的目录就包含了源码,因此我们可以直接让我们的应用工程引用这一个源码工程,因此这里我们直接运行一下命令初始化一个react native工程testapp。

react-native init testapp

添加gradle依赖

(1) 在生成的React Native工程中,将android/build.gradle文件中添加gradle-download-task依赖。

...
    dependencies {
         // gradle可以不替换,还是原来的版本
        classpath 'com.android.tools.build:gradle:1.3.1' 
        classpath 'de.undercouch:gradle-download-task:3.1.2'  //新增加的内容

        // 注意:不要把你的应用的依赖放在这里;
        // 它们应该放在各自模块的build.gradle文件中
    }
...

(2) 添加:ReactAndroid项目,在android/settings.gradle中添加:ReactAndroid项目。

...
//包含ReactAndroid工程
include ':ReactAndroid'

//指出ReactAndroid工程的地址
project(':ReactAndroid').projectDir = new File(rootProject.projectDir, '../node_modules/react-native/ReactAndroid')
...

(3) 修改你的android/app/build.gradle文件,使用:ReactAndroid替换预编译库。例如用compile project(':ReactAndroid'):替换compile 'com.facebook.react:react-native:+'

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile project(':ReactAndroid')            //添加React-native项目
    //compile "com.facebook.react:react-native:+"  //注释掉原来的react-native引用
}

(4) 让第三方模块使用你的分支

如果你使用第三方的React Native模块,你需要重写它们的依赖以避免它们仍然打包官方的预编译库。否则当你编译时会报错-Error: more than one library with package name 'com.facebook.react'.(错误:有几个重名的'com.facebook.react'的包)

修改你的android/app/build.gradle文件,添加如下内容:

configurations.all {
    exclude group: 'com.facebook.react', module: 'react-native'
}

编译运行

在Android Studio欢迎页中选择Import project,随后选择应用所在的文件夹。
然后开始Run,这个过程需要下载200多M的文件然后才开始编译,编译快的可能几分钟,有时候甚至不一定成功。
在我编译的时候查看Gradle Console的时候发现一直卡在downloadBoost这个task上,

:ReactAndroid:createNativeDepsDirectories UP-TO-DATE
:ReactAndroid:downloadBoost
Download http://mirror.nienbo.com/boost/boost_1_57_0.zip

查看ReactAndroid/build.gradle里面的内容可以看到这个任务(如下)下载的是C++的boost库,文件大小接近105M,因此我们把 https://downloads.sourceforge.net/project/boost/boost/1.57.0/boost_1_57_0.zip 替换成 http://mirror.nienbo.com/boost/boost_1_57_0.zip 就会快很多。或者直接从 官网地址 下载并复制到ReactAndroid工程的build/downloads目录下,这样就会直接跳过downloadBoost这个task,编译速度就会快很多。

task downloadBoost(dependsOn: createNativeDepsDirectories, type: Download) {
    src 'https://downloads.sourceforge.net/project/boost/boost/1.57.0/boost_1_57_0.zip'
    onlyIfNewer true
    overwrite false
    dest new File(downloadsDir, 'boost_1_57_0.zip')
}

clean与build 问题

当我们成功编译运行后,clean的时候会将我们之前下载的文件包括boost库文件删除掉,因此为了clean之后再次下载编译so库的问题,我们需要执行以下三个步骤。

1.将ReactAndroid/build/react-ndk 文件夹移动到ReactAndroid项目下也就是ReactAndroid/react-ndk目录下,这一个目录是编译生成的so文件。

2.将ReactAndroid/build.gradle里面的SourceSets.main里面的jniLibs.srcDir的目录从"$buildDir/react-ndk/exported"改为"react-ndk/exported",这样就编译的时候就会去寻找ReactAndroid/react-ndk目录的so文件。

 sourceSets.main {
        jni.srcDirs = []
        jniLibs.srcDir "react-ndk/exported" //so库目录
        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'
            exclude 'com/facebook/react/module/processing'
        }
    }

3.将ReactAndroid/build.gradle里面编译so文件的task注释掉,并将clean依赖于cleanReactNdkLib的task也注视掉,这样clean的时候才不会出错。

//注释掉下面两个任务
/*    tasks.withType(JavaCompile) {
        compileTask -> compileTask.dependsOn packageReactNdkLibs    //开始编译前先进行ndk编译
    }

    clean.dependsOn cleanReactNdkLib*/

这样clean之后再次build就不会重新进行ndk编译so文件,缩短编译的时间。

参考文章

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

推荐阅读更多精彩内容