向 React Native for Android 贡献代码（翻译）

2019-03-04

前言

本文的原作者是 Alessandro Nadalin，文章源链接为 Contributing to React Native for Android，我将其翻译成中文。

在我们 Namshi，喜欢捣鼓各种有趣的技术，这个习俗由来已久：最近的一件，是我们仔细研究了 React Native，它是一个来自 Facebook 的，允许你使用 React 组件 来构建原生移动应用的框架。

当开发一个小的原型产品时，我们使用 WebView 遇到了一点小问题：我们想要子应用内运行，同时也想在 Chrome 中进行远程调试来排查问题。

由于这个特性默认是关闭的，我们必须重新编译 React Native 开启 webview 调试功能。

然后我想跟大家分享一下我的经验，使用同样的方法，你也可以开始 Hacking React Native，并向其贡献代码！

React Native 的小哥哥们写了一个简短的如何从代码编译 RN 的文档，主要可以概括为以下几步：

  1. 配置 Android NDK
  2. 从代码构建，而不是使用预编译的 React Native 包

下载并配置 Android NDK

下载最新的 NDK，赋予可执行权限并运行试试：NDK 下下来是一个压缩包，将它解压后，需要设置环境变量，以便 Android 的构建系统能找到它：

cd /somewhere
wget http://dl.google.com/android/ndk/android-ndk-r10e-linux-x86_64.bin
chmod a+x android-ndk-r10e-linux-x86_64.bin
./android-ndk-r10e-linux-x86_64.bin
export ANDROID_NDK=/somewhere/android-ndk-r10e

配置 RN 从源码构建

这包含几个步骤，不过都很直观。

在你的 React Native 工程中，打开 android/app/build.gradle，你会看到如下所示的 dependencies：

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

    compile "com.facebook.react:react-native:0.17.+"
}

其中：

  • compile "com.facebook.react:react-native:0.17.+" 说明使用的是预编译的 React Native
  • （Maxiee 注：文章有点老了，现在预编译的 React Native 都是使用相对路径，从 node_modules 引用本地 Maven 库来导入）

将它替换为：

compile project(':ReactAndroid')

之后打开 android/settings.gradle，告诉构建系统如何找到 ReactAndroid 模块，在最后添加代码：

include ':ReactAndroid'

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

最后，我们要在 android/build.gradle 的 dependencies 结构中该一行：

classpath 'de.undercouch:gradle-download-task:2.0.0'

大功告成！

最后

现在，当你执行 react-native run-android，你会注意到构建速度变慢了，这是因为 Gradle 正在从 React Native 代码执行构建，而不是使用预编译的包。

之后你可以打开 ./node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/ 进行 hacking，添加你自己的改动，并通过 react-native run-android 进行测试。

对我们来说，我们最终开启了 webviews 的远程调试功能，并找出了为什么 webview 不工作的原因：它只不过是需要访问 localStorage，但是被 Android Webview 默认关闭了。

备注：我们发了一个 PR（https://github.com/facebook/react-native/commit/67931284350ebd2b60d1e11870690272079b1726），这样我们可以根据需要打开 DOM 储存 ;-)