React Native 基础之从源代码编译详解-适合Android开发

React Native 基础之从源代码编译详解-适合Android开发

（一）前言

这篇文章给大家介绍一下从源代码进行编译 React Native模块，这篇文章适合Android模块开发。

这篇文章的目的是什么呢？如果你想使用官方最新功能，或者使用官方修复Bug补丁代码，或者去使用官方现在还没有正式发布的新功能以及维护自己的功能代码。那么现在就需要现在这篇文章作为指导，进行编译React Native。

（二）环境配置

2.1 Android SDK
首先确保你已经正确安装了Android SDK,并且在终端运行 android 命令就可以打开Android SDK Manager。

在Android SDK中要确保一下4点内容被正确安装。

• Android SDK版本Version 23 (build.gradle文件中compileSdkVersion标签版本号)
• Android SDK Build-tools Version 23.0.1 以上(build.gradle文件中buildToolsVersion标签版本号)
• Android Support Repository >= 17 (Android支持库)
• Android NDK(下载并且解压配置具体查看Mac 版本

2.2 设置Gradle指向当前安装的Android SDK, 你也可以选择配置$ANDROID_SDK和$ANDROID_NDK环境变量，或者在clone的react-native的项目根目录下面创建一个local.properties文件，然后做如下配置：
local.properties 文件创建

vim local.properties

local.properties配置：

sdk.dir=absolute_path_to_android_sdk  (android_sdk的绝对路径)
ndk.dir=absolute_path_to_android_ndk  (android_ndk的绝对路径)

上诉的路径要根据你自己电脑的路径配置。

（三）源代码编译

3.1 从主分支安装React Native
首先需要从主分支中安装React Native。运行如下代码安装：

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

或者另一种方式：
克隆React-native仓库代码到node_modules文件夹下面，然后运行 npm
install 命令进行安装。

3.2 添加gradle文件配置依赖

在android/build.gradle文件中添加gradle-download-task配置依赖，具体代码如下:

...
    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
    }

3.3 添加:ReactAndroid项目依赖

在android/settings.gradle文件中添加:ReactAndroid项目配置，具体代码如下:

...
include ':ReactAndroid'

project(':ReactAndroid').projectDir = new File(
    rootProject.projectDir, '../node_modules/react-native/ReactAndroid')
...

进行修改android/app/build.gradle文件来进行使用:ReactAndroid项目进行替代预编译配置的react-native库。例如编译项目comple project(‘:ReactAndroid’)进行替换 compile ‘com.facebook.react:react-native:0.16.+’ 具体配置代码如下:

...
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'

    compile project(':ReactAndroid')

    ...
}

3.4.让第三方模块使用我们开发的分支

如果你使用了第三方React Native相关的模块，你需要重写他们的依赖配置以防止他们仍然使用官方默认的react-native的库。否则你可能会遇到如下的编译错误:Error: more than one library with package name ‘com.facebook.react’。解决方案:进行修改你的android/app/build.gradle文件，使用以下的实例代码进行替换compile project(‘:react-native-custom-module’)

compile(project(':react-native-custom-module')) {
    exclude group: 'com.facebook.react', module: 'react-native'
}

（四）通过Android Studio进行编译

如果你使用Android Studio了，那么你在主界面选择Import Project进行导入项目中的android文件夹。你应该可以点击Run按钮进行运行你的应用到设备中。但是Android Studio不会自动开启Packager。所以你需要在终端命令行中运行npm start来进行打开服务。

（五）值得注意的问题

从源码进行编译会花费大量的时间，尤其是第一次编译，该会下载大约200M左右的文件，然后进行编译代码。每一次你用库中更新react-native版本的时候，该编译的目录就可能被删除，那么所有的文件就需要重新下载了。为了解决这个问题，你可以进行修改~/.gradle/init.gradle文件来进行改变编译目录路径。具体修改方法如下:

gradle.projectsLoaded {
    rootProject.allprojects {
        buildDir = "/path/to/build/directory/${rootProject.name}/${project.name}"
    }
}

（六）错误处理

如果Gradle构建过程中遇到ndk-build错误，可以查看前面的local.properties文件配置

转载自：http://www.lcode.org/