网友通过本文主要向大家介绍了React Native Android入门实战及深入源码分析系列（2）——React Native源码编译等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
React Native Android入门实战及深入源码分析系列（2）——React Native源码编译
在上一节中，我们通过一个相册的制作来学习了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') {
fil