React Native Android入门实战及深入源码分析系列（2）—

本文为老曾原创，转载需注明出处：http://blog.csdn.net/minimicall?viewmode=contents

在上一节中，我们通过一个相册的制作来学习了React Native编写。这一节我们需要开始学习React Native的源码。

学习源码，从编译源码开始。

首先，我们需要把代码从github中克隆下来。

https://github.com/facebook/react-native.git

然后，我们可以切换到它的稳定分支，2016-03-30是我的操作时间，这个时候0.23-stable是最新的稳定版本。

git checkout -b 0.23-stable remotes/origin/0.23-stable

我们首先升级一下我们的react-native，因为等下创建项目最好使用最新版本的。

首先，我们需要查询最新版本：

nam info react-native

得到最新版本是0.22.2

npm install --save react-native@0.22.2

接下来，创建一个项目：

react-native init videolegend

好，等待漫长的初始化过程。

完事之后，打开项目顶层的package.json文件：

{
  "name": "videolegend","version": "0.0.1","private": true,"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },"dependencies": {
    "react": "^0.14.8","react-native": "^0.22.2"
  }
}

可以看出我们的一个版本的基本信息。

接下来，我们来进行源码的编译。编译源码，官网有一个页面，我们的过程呢，也是基于它的，但如果你完全基于它，那么你是会吃亏的。

所以，为什么我要写一篇文章出来，给大家作为参考。

官网源码编译地址：点击打开链接

前置条件：

1、SDK ： compileSdkVersion 23

2、SDK build tools : 23.0.1

3、Android Support Repository >=17

4 、 NDK (4.8哦就是 ndk-r10b,，4.9都不行,会坑出很多问题，如果NDK版本不对。）

使用AndroidStudio打开项目。

1、项目顶层build.grade的配置：

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.3.1'
//加下面这一行
        classpath 'de.undercouch:gradle-download-task:2.0.0'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS,Obj-C sources,Android binaries) is installed from npm
            url "$projectDir/../../node_modules/react-native/android"
        }
    }
}

2、添加ReactAndroid模块，在顶层的setting.grade文件中，配置如下：

rootProject.name = 'videolegend'

include ':app'
include ':ReactAndroid'
project(':ReactAndroid').projectDir = new File('/Users/zengjinlong/workplace/react/reactnativesrc/react-native/ReactAndroid')

那个绝对目录是我的，你只需要改成你的就行。

3、更改项目依赖：在应用模块的build.gradle里面更改依赖部分：

dependencies {
    compile fileTree(dir: "libs",include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    //compile "com.facebook.react:react-native:+"  // From node_modules
    compile project(':ReactAndroid')
}

注释掉原来的，更改为模块依赖。

官网到这里，就叫你可以run啦。呵呵，too young too simple。

首先，ReactAndroid里面的有些下载任务你给它再多时间都不可能完成。所以。。。我们需要离线下载好。然后更改其脚本，进行编译。

1、离线下载好

boost_1_57_0

double_conversion-1.1.1

folly-deprecate-dynamic-initializer

glog-0.3.3

jsc头文件

然后按照目录放到ReactAndroid的build/downloads/目录下面。大概有450M内容。

2、修改ReactAndroid的build.grade脚本

主要是删掉那些下载任务的脚本，直接进入拷贝任务和编译任务。

来，我们来感受一下修改前和修改后的区别。

首先，修改前：

// Copyright 2015-present Facebook. All Rights Reserved.

apply plugin: 'com.android.library'
apply plugin: 'maven'

apply plugin: 'de.undercouch.download'

import de.undercouch.gradle.tasks.download.Download
import org.apache.tools.ant.taskdefs.condition.Os
import org.apache.tools.ant.filters.ReplaceTokens

// We download varIoUs C++ open-source dependencies into downloads.
// We then copy both the downloaded code and our custom makefiles and headers into third-party-ndk.
// After that we build native code from src/main/jni with module path pointing at third-party-ndk.

def downloadsDir = new File("$buildDir/downloads")
def thirdPartyNdkDir = new File("$buildDir/third-party-ndk")

task createNativeDepsDirectories {
    downloadsDir.mkdirs()
    thirdPartyNdkDir.mkdirs()
}
 //下载boost 超级慢，所以自己下好吧
task downloadBoost(dependsOn: createNativeDepsDirectories,type: Download) {
    // Use ZIP version as it's faster this way to selectively extract some parts of the archive
    src 'https://downloads.sourceforge.net/project/boost/boost/1.57.0/boost_1_57_0.zip'
    // alternative
    // src 'http://mirror.nienbo.com/boost/boost_1_57_0.zip'
    onlyIfNewer true
    overwrite false
    dest new File(downloadsDir,'boost_1_57_0.zip')
}
  //下载好boost后，拷贝到指定目录
task prepareBoost(dependsOn: downloadBoost,type: Copy) {
    from zipTree(downloadBoost.dest)
    from 'src/main/jni/third-party/boost/Android.mk'
    include 'boost_1_57_0/boost/**/*.hpp','Android.mk'
    into "$thirdPartyNdkDir/boost"
}
//下载
task downloadDoubleConversion(dependsOn: createNativeDepsDirectories,type: Download) {
    src 'https://github.com/google/double-conversion/archive/v1.1.1.tar.gz'
    onlyIfNewer true
    overwrite false
    dest new File(downloadsDir,'double-conversion-1.1.1.tar.gz')
}
//
task prepareDoubleConversion(dependsOn: downloadDoubleConversion,type: Copy) {
    from tarTree(downloadDoubleConversion.dest)
    from 'src/main/jni/third-party/double-conversion/Android.mk'
    include 'double-conversion-1.1.1/src/**/*','Android.mk'
    filesMatching('*/src/**/*',{fname -> fname.path = "double-conversion/${fname.name}"})
    includeEmptyDirs = false
    into "$thirdPartyNdkDir/double-conversion"
}

task downloadFolly(dependsOn: createNativeDepsDirectories,type: Download) {
    src 'https://github.com/facebook/folly/archive/deprecate-dynamic-initializer.tar.gz'
    onlyIfNewer true
    overwrite false
    dest new File(downloadsDir,'folly-deprecate-dynamic-initializer.tar.gz');
}

task prepareFolly(dependsOn: downloadFolly,type: Copy) {
    from tarTree(downloadFolly.dest)
    from 'src/main/jni/third-party/folly/Android.mk'
    include 'folly-deprecate-dynamic-initializer/folly/**/*','Android.mk'
    eachFile {fname -> fname.path = (fname.path - "folly-deprecate-dynamic-initializer/")}
    includeEmptyDirs = false
    into "$thirdPartyNdkDir/folly"
}

task downloadGlog(dependsOn: createNativeDepsDirectories,type: Download) {
    src 'https://github.com/google/glog/archive/v0.3.3.tar.gz'
    onlyIfNewer true
    overwrite false
    dest new File(downloadsDir,'glog-0.3.3.tar.gz')
}

// Prepare glog sources to be compiled,this task will perform steps that normally shoudl've been
// executed by automake. This way we can avoid dependencies on make/automake
task prepareGlog(dependsOn: downloadGlog,type: Copy) {
    from tarTree(downloadGlog.dest)
    from 'src/main/jni/third-party/glog/'
    include 'glog-0.3.3/src/**/*','Android.mk','config.h'
    includeEmptyDirs = false
    filesMatching('**/*.h.in') {
        filter(ReplaceTokens,tokens: [
                ac_cv_have_unistd_h: '1',ac_cv_have_stdint_h: '1',ac_cv_have_systypes_h: '1',ac_cv_have_inttypes_h: '1',ac_cv_have_libgflags: '0',ac_google_start_namespace: 'namespace google {',ac_cv_have_uint16_t: '1',ac_cv_have_u_int16_t: '1',ac_cv_have___uint16: '0',ac_google_end_namespace: '}',ac_cv_have___builtin_expect: '1',ac_google_namespace: 'google',ac_cv___attribute___noinline: '__attribute__ ((noinline))',ac_cv___attribute___noreturn: '__attribute__ ((noreturn))',ac_cv___attribute___printf_4_5: '__attribute__((__format__ (__printf__,4,5)))'
        ])
        it.path = (it.name - '.in')
    }
    into "$thirdPartyNdkDir/glog"
}

task downloadJSCHeaders(type: Download) {
    def jscAPIBaseURL = 'https://svn.webkit.org/repository/webkit/!svn/bc/174650/trunk/Source/JavaScriptCore/API/'
    def jscHeaderFiles = ['JSBase.h','JSContextRef.h','JSObjectRef.h','JSRetainPtr.h','JSStringRef.h','JSValueRef.h','WebKitAvailability.h']
    def output = new File(downloadsDir,'jsc')
    output.mkdirs()
    src(jscHeaderFiles.collect { headerName -> "$jscAPIBaseURL$headerName" })
    onlyIfNewer true
    overwrite false
    dest output
}

// Create Android.mk library module based on so files from mvn + include headers fetched from webkit.org
task prepareJSC(dependsOn: downloadJSCHeaders) << {
    copy {
        from zipTree(configurations.compile.fileCollection { dep -> dep.name == 'android-jsc' }.singleFile)
        from {downloadJSCHeaders.dest}
        from 'src/main/jni/third-party/jsc/Android.mk'
        include 'jni/**/*.so','*.h','Android.mk'
        filesMatching('*.h',{ fname -> fname.path = "JavaScriptCore/${fname.path}"})
        into "$thirdPartyNdkDir/jsc";
    }
}

def getNdkBuildName() {
    if (Os.isFamily(Os.FAMILY_WINDOWS)) {
        return "ndk-build.cmd"
    } else {
        return "ndk-build"
    }
}

def findNdkBuildFullPath() {
    // we allow to provide full path to ndk-build tool
    if (hasProperty('ndk.command')) {
        return property('ndk.command')
    }
    // or just a path to the containing directory
    if (hasProperty('ndk.path')) {
        def ndkDir = property('ndk.path')
        return new File(ndkDir,getNdkBuildName()).getAbsolutePath()
    }
    if (System.getenv('ANDROID_NDK') != null) {
        def ndkDir = System.getenv('ANDROID_NDK')
        return new File(ndkDir,getNdkBuildName()).getAbsolutePath()
    }
    def ndkDir = android.hasProperty('plugin') ? android.plugin.ndkFolder :
            plugins.getPlugin('com.android.library').sdkHandler.getNdkFolder()
    if (ndkDir) {
        return new File(ndkDir,getNdkBuildName()).getAbsolutePath()
    }
    return null
}

def getNdkBuildFullPath() {
    def ndkBuildFullPath = findNdkBuildFullPath()
    if (ndkBuildFullPath == null) {
        throw new GradleScriptException(
            "ndk-build binary cannot be found,check if you've set " +
            "\$ANDROID_NDK environment variable correctly or if ndk.dir is " +
            "setup in local.properties",null)
    }
    if (!new File(ndkBuildFullPath).canExecute()) {
        throw new GradleScriptException(
            "ndk-build binary " + ndkBuildFullPath + " doesn't exist or isn't executable.\n" +
            "Check that the \$ANDROID_NDK environment variable,or ndk.dir in local.proerties,is set correctly.\n" +
            "(On Windows,make sure you escape backslashes in local.properties or use forward slashes,e.g. C:\\\\ndk or C:/ndk rather than C:\\ndk)",null)
    }
    return ndkBuildFullPath
}

task buildReactNdkLib(dependsOn: [prepareJSC,prepareBoost,prepareDoubleConversion,prepareFolly,prepareGlog],type: Exec) {
    inputs.file('src/main/jni/react')
    outputs.dir("$buildDir/react-ndk/all")
    commandLine getNdkBuildFullPath(),'NDK_PROJECT_PATH=null',"NDK_APPLICATION_MK=$projectDir/src/main/jni/Application.mk",'NDK_OUT=' + temporaryDir,"NDK_LIBS_OUT=$buildDir/react-ndk/all","THIRD_PARTY_NDK_DIR=$buildDir/third-party-ndk",'-C',file('src/main/jni/react/jni').absolutePath,'--jobs',project.hasProperty("jobs") ? project.property("jobs") : Runtime.runtime.availableProcessors()
}

task cleanReactNdkLib(type: Exec) {
    commandLine getNdkBuildFullPath(),'clean'
}

task packageReactNdkLibs(dependsOn: buildReactNdkLib,type: Copy) {
    from "$buildDir/react-ndk/all"
    exclude '**/libjsc.so'
    into "$buildDir/react-ndk/exported"
}

task packageReactNdkLibsForBuck(dependsOn: packageReactNdkLibs,type: Copy) {
  from "$buildDir/react-ndk/exported"
  into "src/main/jni/prebuilt/lib"
}

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'
        testApplicationId "com.facebook.react.tests.gradle"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }

    sourceSets.main {
        jni.srcDirs = []
        jniLibs.srcDir "$buildDir/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']
          exclude 'com/facebook/react/processing'
        }
    }

    tasks.withType(JavaCompile) {
        compileTask -> compileTask.dependsOn packageReactNdkLibs
    }

    clean.dependsOn cleanReactNdkLib

    lintOptions {
        abortOnError false
    }
}

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.8.1'
    compile 'com.facebook.fresco:imagepipeline-okhttp:0.8.1'
    compile 'com.facebook.stetho:stetho:1.2.0'
    compile 'com.facebook.stetho:stetho-okhttp:1.2.0'
    compile 'com.fasterxml.jackson.core:jackson-core:2.2.3'
    compile 'com.google.code.findbugs:jsr305:3.0.0'
    compile 'com.squareup.okhttp:okhttp:2.5.0'
    compile 'com.squareup.okhttp:okhttp-ws:2.5.0'
    compile 'com.squareup.okio:okio:1.6.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:testing-support-lib:0.1"
}

apply from: 'release.gradle'

修改完以后：

// Copyright 2015-present Facebook. All Rights Reserved.

apply plugin: 'com.android.library'
apply plugin: 'maven'

apply plugin: 'de.undercouch.download'

import de.undercouch.gradle.tasks.download.Download
import org.apache.tools.ant.taskdefs.condition.Os
import org.apache.tools.ant.filters.ReplaceTokens

// We download varIoUs C++ open-source dependencies into downloads.
// We then copy both the downloaded code and our custom makefiles and headers into third-party-ndk.
// After that we build native code from src/main/jni with module path pointing at third-party-ndk.

def downloadsDir = new File("$buildDir/downloads")
def thirdPartyNdkDir = new File("$buildDir/third-party-ndk")

task createNativeDepsDirectories {
    downloadsDir.mkdirs()
    thirdPartyNdkDir.mkdirs()
}
//
//task downloadBoost(dependsOn: createNativeDepsDirectories,type: Download) {
//    // Use ZIP version as it's faster this way to selectively extract some parts of the archive
//    src 'https://downloads.sourceforge.net/project/boost/boost/1.57.0/boost_1_57_0.zip'
//    // alternative
//    // src 'http://mirror.nienbo.com/boost/boost_1_57_0.zip'
//    onlyIfNewer true
//    overwrite false
//    dest new File(downloadsDir,'boost_1_57_0.zip')
//}

task prepareBoost( type: Copy) {
    from 'build/downloads/'
    from 'src/main/jni/third-party/boost/Android.mk'
    include 'boost_1_57_0/boost/**/*.hpp','Android.mk'
    into "$thirdPartyNdkDir/boost"
}

//task downloadDoubleConversion(dependsOn: createNativeDepsDirectories,type: Download) {
//    src 'https://github.com/google/double-conversion/archive/v1.1.1.tar.gz'
//    onlyIfNewer true
//    overwrite false
//    dest new File(downloadsDir,'double-conversion-1.1.1.tar.gz')
//}

task prepareDoubleConversion(type: Copy) {
    from 'build/downloads/'
    from 'src/main/jni/third-party/double-conversion/Android.mk'
    include 'double-conversion-1.1.1/src/**/*',{fname -> fname.path = "double-conversion/${fname.name}"})
    includeEmptyDirs = false
    into "$thirdPartyNdkDir/double-conversion"
}

//task downloadFolly(dependsOn: createNativeDepsDirectories,type: Download) {
//    src 'https://github.com/facebook/folly/archive/deprecate-dynamic-initializer.tar.gz'
//    onlyIfNewer true
//    overwrite false
//    dest new File(downloadsDir,'folly-deprecate-dynamic-initializer.tar.gz');
//}

task prepareFolly(type: Copy) {
    from 'build/downloads/'
    from 'src/main/jni/third-party/folly/Android.mk'
    include 'folly-deprecate-dynamic-initializer/folly/**/*','Android.mk'
    eachFile {fname -> fname.path = (fname.path - "folly-deprecate-dynamic-initializer/")}
    includeEmptyDirs = false
    into "$thirdPartyNdkDir/folly"
}

//task downloadGlog(dependsOn: createNativeDepsDirectories,type: Download) {
//    src 'https://github.com/google/glog/archive/v0.3.3.tar.gz'
//    onlyIfNewer true
//    overwrite false
//    dest new File(downloadsDir,'glog-0.3.3.tar.gz')
//}

// Prepare glog sources to be compiled,this task will perform steps that normally shoudl've been
// executed by automake. This way we can avoid dependencies on make/automake
task prepareGlog( type: Copy) {
    from 'build/downloads/'
    from 'src/main/jni/third-party/glog/'
    include 'glog-0.3.3/src/**/*',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.8.1'
    compile 'com.facebook.fresco:imagepipeline-okhttp:0.8.1'
    compile 'com.facebook.stetho:stetho:1.2.0'
    compile 'com.facebook.stetho:stetho-okhttp:1.2.0'
    compile 'com.fasterxml.jackson.core:jackson-core:2.2.3'
    compile 'com.google.code.findbugs:jsr305:3.0.0'
    compile 'com.squareup.okhttp:okhttp:2.5.0'
    compile 'com.squareup.okhttp:okhttp-ws:2.5.0'
    compile 'com.squareup.okio:okio:1.6.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:testing-support-lib:0.1"
}

apply from: 'release.gradle'

去掉了那些下载，因为我们已经下载好，扔进去。至于那些怎么下载，大家就自己自行想办法吧，反正一个个下载。

然后可以编译了。注意ndk版本，在local.properties文件里面设定：

ndk.dir=/Users/zengjinlong/workplace/android-ndk-r10b
sdk.dir=/Users/zengjinlong/workplace/android-sdk-macosx

OK，跑起来。

然后，在项目的顶层，npm start 。

注意，我们并没有将ReactAndroid 装载到node_module里面。因为这样容易出问题，所以这也是跟官网差异的一个地方。就是，工程依赖是通过源码。但是npm start的，其实是node_module里面的，也就是0.22.2

好，今天就到这里。有什么不懂的，可以来问我。

470910357@qq.com;

微信：micall123

React Native Android入门实战及深入源码分析系列（2）——React Native源码编译

猜你在找的React相关文章