使用React Native源码编译Android项目

Posted 2023-02-18 yubo_725

前言

公司的项目用到了React Native，最近通过后台监控到一些崩溃问题，主要出在React Native Java侧的源码中，由于无法在js侧去定位和修复问题，于是希望通过修改React Native源码达到规避Crash的目的，下面记录编译React Native源码的过程。

注：本文所有流程仅在macOS下测试通过，未在Linux和Windows下测试

准备工作

下载RN源码

首先需要准备一份React Native的源码，由于我们的项目中使用的是0.66.3的版本，于是我直接在github上下载了一份源码zip包，可以进入React Native在GitHub上的主页
https://github.com/facebook/react-native
切到0.66.3这个tag，然后点击Code – Download Zip来下载，当然你也可以直接git clone整个代码仓库然后使用下面的命令基于v0.66.3这个tag切个新分支出来：git checkout -b v0.66.3 v0.66.3

创建一个空的RN项目

使用下面的命令来创建一个新的RN项目：

npx react-native init AwesomeProject --version 0.66.3

这里需要注意使用–version参数来指定使用的RN版本，确保版本统一。
使用npx命令创建RN项目后，会自动安装相关依赖，在AwesomeProject/node_modules目录下，也会有一份RN源码的目录，名称为react-native，但是我们的目的是为了直接通过RN源码去编译整个项目，所以不能直接用这个react-native目录，而是需要将上一步中下载好的源码全部拷贝到node_modules目录下，覆盖react-native目录。

修改android项目配置

这一步我们需要修改上一步中创建的空RN项目中的Android配置，咱们一步一步来做修改，首先是AwesomeProject/android/build.gradle文件的修改，需要加入如下两个配置：

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

buildscript 
    ext 
        buildToolsVersion = "30.0.2"
        minSdkVersion = 21
        compileSdkVersion = 30
        targetSdkVersion = 30
        ndkVersion = "21.4.7075529"
    
    repositories 
        google()
        mavenCentral()
    
    dependencies 
        classpath("com.android.tools.build:gradle:4.2.2")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
        classpath 'com.tencent.bugly:symtabfileuploader:2.2.1'
        classpath 'de.undercouch:gradle-download-task:5.0.1' // (1)添加这行代码
    


allprojects 
    repositories 
        mavenCentral()
        mavenLocal()
        maven 
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        
        maven 
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        

        google()
        maven  url 'https://www.jitpack.io' 
        maven 
            url 'http://nexus.d.xiaomi.net/nexus/content/groups/public'
        
    

	// (2) 添加如下配置
    configurations.all 
        resolutionStrategy 
            dependencySubstitution 
                substitute module("com.facebook.react:react-native:+") with project(":ReactAndroid")
            
        
    

然后打开AwesomeProject/android/settings.gradle文件，在文件开始处添加如下配置：

pluginManagement 
    repositories 
        gradlePluginPortal()
        mavenLocal()
        google()
    

在该文件的末尾处添加如下配置：

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

include(":packages:react-native-codegen:android")
project(":packages:react-native-codegen:android").projectDir = new File(rootProject.projectDir,
        "../node_modules/react-native/packages/react-native-codegen/android")

includeBuild("../node_modules/react-native/packages/react-native-codegen/android")

includeBuild('../node_modules/react-native/packages/react-native-gradle-plugin')

接着需要修改AwesomeProject/android/app/build.gradle文件，将之前的

implementation "com.facebook.react:react-native:+"

修改为：

implementation project(':ReactAndroid')

由于React Native源码中有一部分c代码，需要配置Android NDK参与编译，故还需要做Android NDK的一些配置，主要是在AwesomeProject/android/gradle.properties文件中添加如下两个配置：

ANDROID_NDK_VERSION=21.4.7075529
ANDROID_NDK_PATH=/Users/yubo/Library/Android/sdk/ndk/21.4.7075529

ANDROID_NDK_VERSION指定了NDK的版本，ANDROID_NDK_PATH指定了NDK所在路径，如果不知道NDK怎么下载，可以通过Android Studio打开AwesomeProject/android目录，然后在Android Studio – Preferences…菜单中，选择对应的NDK下载即可，如下图所示：

编译项目

做完了如上几步配置后，就可以开始编译项目了，直接使用下面的命令即可：

cd AwesomeProject/android && ./gradlew clean assebleDebug

上面的命令主要是打Android debug包，当然你也可以直接在AwesomeProject根目录执行npm run android，如果配置没有问题，将会开始使用RN源码参与Android的编译打包流程，这一步在我的Macbook M1上会跑大约8分钟左右，第一次编译的时间会稍微有些长，待第一次编译成功后有了缓存，下次编译时间就很快了。

由于我的笔记本是M1芯片的Macbook Pro，在编译过程中出现错误，搜索了一番后，解决方案如下：
拷贝了一份ndk目录下的ndk-build文件，修改其内容如下：

#!/bin/sh
DIR="$(cd "$(dirname "$0")" && pwd)"
arch -x86_64 /bin/bash $DIR/build/ndk-build "$@"

打包aar

如果直接在项目中依赖RN的源码，不是一个很好的选择，更好的方式是将RN源码编译打包为一个aar文件，然后在Android项目中使用，打包aar的命令如下：

./gradlew :ReactAndroid:installArchives --no-daemon

注意这个命令需要在RN项目的android目录下执行，执行完毕后，会在node_modules/react-native/android/com/facebook/react/react-native目录下，生成对应的文件，其中就有aar文件，我们可以直接拷贝aar文件到Android项目中去依赖，也可以上传对应的编译产物到maven，通过maven在Android项目中去依赖

后记

编译RN源码花了一些时间，主要是完全按照官方文档来，绕了一些弯，最后还是自己慢慢尝试才编译成功，关于官方文档上的编译步骤，可以参考这里：
https://github.com/facebook/react-native/wiki/Building-from-source