跳到主要内容
Version: 0.71

从源代码编译React Native

如果你想提前合并官方的修复补丁，尝试还没发布的最新特性，或者添加一些你自己的原生代码，那么就需要自己从源代码编译 React Native。

Android​

预备条件​

在 Android Studio 的 SDK Manager 中安装以下组件：

  • Android SDK version 28 (编译 SDK 版本号在build.gradle中可以找到)
  • SDK build tools version 28.0.3(编译工具版本号在build.gradle中可以找到)
  • Android Support Repository >= 28
  • Android NDK(下载及安装指南请看后文)

将 Gradle 指向你的安卓 SDK：​

第一步： 在命令行配置文件中设置环境变量。

注意： 对于不同的 shell 命令行，配置文件有所不同，请根据具体情况选择，例如：

  • bash: .bash_profile 或 .bashrc
  • zsh: .zprofile 或 .zshrc
  • ksh: .profile 或 $ENV

在配置文件中加入（请填写自己的实际路径）：

export ANDROID_SDK=/Users/your_unix_name/android-sdk-macosx
export ANDROID_NDK=/Users/your_unix_name/android-ndk/android-ndk-r17c

第二步： 在项目目录的 android 目录下创建local.properties文件。添加以下内容：（注意：windows 下路径需要使用反双斜杠）

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

Android NDK 的下载链接（0.57 之前使用 r10e 版本）​

  1. Mac OS (64-bit) - http://dl.google.com/android/repository/android-ndk-r17c-darwin-x86_64.zip
  2. Linux (64-bit) - http://dl.google.com/android/repository/android-ndk-r17c-linux-x86_64.zip
  3. Windows (64-bit) - http://dl.google.com/android/repository/android-ndk-r17c-windows-x86_64.zip
  4. Windows (32-bit) - http://dl.google.com/android/repository/android-ndk-r17c-windows-x86.zip

安装说明请参考官方文档。

编译源代码​

1. 下载 react-native 源代码​

首先，在你的分支代码中安装 react-native。例如从官方地址安装主干版本：

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

或者，你也可以把仓库克隆到你的node_modules目录，然后运行npm install进行安装

2. 添加 gradle 依赖​

在android/build.gradle中添加gradle-download-task依赖

Gradle
...
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
        classpath 'de.undercouch:gradle-download-task:3.4.3'

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

3. 添加:ReactAndroid项目​

在android/settings.gradle中添加:ReactAndroid项目

Gradle
...
include ':ReactAndroid'

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

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

Gradle
...
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}'

    implementation project(':ReactAndroid')

    ...
}
...

4. 让第三方模块使用你的分支​

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

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

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

在 Android Studio 中编译​

在 Android Studio 欢迎页中选择Import project，随后选择您应用所在的文件夹。

您还需要使用Run按钮(译注：Android Studio 中绿色的运行按钮)来在设备上运行您的 app，此外 Android Studio 不会自动开启服务，你还需要通过npm start来启动开发服务。

其他注意事项​

从源码进行编译将会花费很长时间，尤其是第一次编译，需要下载接近 200M 的文件然后编译原生代码。每次你在自己的仓库更新react-native版本时，构建的目录可能会被删除，所有的文件都需要重新下载。为了避免构建目录被删，你需要编辑~/.gradle/init.gradle文件来修改构建目录路径。

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

Troubleshooting​

Gradle build fails in ndk-build. See the section about local.properties file above.

Testing your Changes​

If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see Running Tests.

Making your changes available​

See the Publishing your own version of react native for several options to make your changes available for your and other app projects.