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'

這樣,編譯好后,整個項目都在自己手上了,就可以很方法進行一些改動。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容