上一篇文章分析完 react-native-gradle-plugin 后,我们知道了react-native-gradle-plugin 主要是对依赖环境,以及RN的依赖版本进行管理。
本篇文章来接着分析 native_modules.gradle 这个脚本,这个脚本是React Native构建中比较重要的一个角色。
native_modules.gradle
这是一个源码形式的脚本文件,虽然只有一个文件,但是实际上要比插件的逻辑还要复杂一些, 源码如下
import groovy.json.JsonSlurper
import org.gradle.initialization.DefaultSettings
import org.apache.tools.ant.taskdefs.condition.Os
def generatedFileName = "PackageList.java"
def generatedFilePackage = "com.facebook.react"
def generatedFileContentsTemplate = """
package $generatedFilePackage;
import android.app.Application;
import android.content.Context;
import android.content.res.Resources;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainPackageConfig;
import com.facebook.react.shell.MainReactPackage;
import java.util.Arrays;
import java.util.ArrayList;
{{ packageImports }}
public class PackageList {
private Application application;
private ReactNativeHost reactNativeHost;
private MainPackageConfig mConfig;
public PackageList(ReactNativeHost reactNativeHost) {
this(reactNativeHost, null);
}
public PackageList(Application application) {
this(application, null);
}
public PackageList(ReactNativeHost reactNativeHost, MainPackageConfig config) {
this.reactNativeHost = reactNativeHost;
mConfig = config;
}
public PackageList(Application application, MainPackageConfig config) {
this.reactNativeHost = null;
this.application = application;
mConfig = config;
}
private ReactNativeHost getReactNativeHost() {
return this.reactNativeHost;
}
private Resources getResources() {
return this.getApplication().getResources();
}
private Application getApplication() {
if (this.reactNativeHost == null) return this.application;
return this.reactNativeHost.getApplication();
}
private Context getApplicationContext() {
return this.getApplication().getApplicationContext();
}
public ArrayList<ReactPackage> getPackages() {
return new ArrayList<>(Arrays.<ReactPackage>asList(
new MainReactPackage(mConfig){{ packageClassInstances }}
));
}
}
"""
def cmakeTemplate = """# This code was generated by [React Native CLI](https://www.npmjs.com/package/@react-native-community/cli)
cmake_minimum_required(VERSION 3.13)
set(CMAKE_VERBOSE_MAKEFILE on)
{{ libraryIncludes }}
set(AUTOLINKED_LIBRARIES
{{ libraryModules }}
)
"""
def rncliCppTemplate = """/**
* This code was generated by [React Native CLI](https://www.npmjs.com/package/@react-native-community/cli).
*
* Do not edit this file as changes may cause incorrect behavior and will be lost
* once the code is regenerated.
*
*/
#include "rncli.h"
{{ rncliCppIncludes }}
namespace facebook {
namespace react {
{{ rncliReactLegacyComponentNames }}
std::shared_ptr<TurboModule> rncli_ModuleProvider(const std::string moduleName, const JavaTurboModule::InitParams ¶ms) {
{{ rncliCppModuleProviders }}
return nullptr;
}
void rncli_registerProviders(std::shared_ptr<ComponentDescriptorProviderRegistry const> providerRegistry) {
{{ rncliCppComponentDescriptors }}
{{ rncliReactLegacyComponentDescriptors }}
return;
}
} // namespace react
} // namespace facebook
"""
def rncliHTemplate = """/**
* This code was generated by [React Native CLI](https://www.npmjs.com/package/@react-native-community/cli).
*
* Do not edit this file as changes may cause incorrect behavior and will be lost
* once the code is regenerated.
*
*/
#pragma once
#include <ReactCommon/JavaTurboModule.h>
#include <ReactCommon/TurboModule.h>
#include <jsi/jsi.h>
#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
namespace facebook {
namespace react {
std::shared_ptr<TurboModule> rncli_ModuleProvider(const std::string moduleName, const JavaTurboModule::InitParams ¶ms);
void rncli_registerProviders(std::shared_ptr<ComponentDescriptorProviderRegistry const> providerRegistry);
} // namespace react
} // namespace facebook
"""
class ReactNativeModules {
private Logger logger
private String packageName
private File root
private ArrayList<HashMap<String, String>> reactNativeModules
private ArrayList<String> unstable_reactLegacyComponentNames
private HashMap<String, ArrayList> reactNativeModulesBuildVariants
private String reactNativeVersion
private static String LOG_PREFIX = ":ReactNative:"
ReactNativeModules(Logger logger, File root) {
this.logger = logger
this.root = root
def (nativeModules, reactNativeModulesBuildVariants, androidProject, reactNativeVersion) = this.getReactNativeConfig()
this.reactNativeModules = nativeModules
this.reactNativeModulesBuildVariants = reactNativeModulesBuildVariants
this.packageName = androidProject["packageName"]
this.unstable_reactLegacyComponentNames = androidProject["unstable_reactLegacyComponentNames"]
this.reactNativeVersion = reactNativeVersion
}
/**
* Include the react native modules android projects and specify their project directory
*/
void addReactNativeModuleProjects(DefaultSettings defaultSettings) {
reactNativeModules.forEach { reactNativeModule ->
String nameCleansed = reactNativeModule["nameCleansed"]
String androidSourceDir = reactNativeModule["androidSourceDir"]
defaultSettings.include(":${nameCleansed}")
defaultSettings.project(":${nameCleansed}").projectDir = new File("${androidSourceDir}")
}
}
/**
* Adds the react native modules as dependencies to the users `app` project
*/
void addReactNativeModuleDependencies(Project appProject) {
reactNativeModules.forEach { reactNativeModule ->
def nameCleansed = reactNativeModule["nameCleansed"]
def dependencyConfiguration = reactNativeModule["dependencyConfiguration"]
appProject.dependencies {
if (reactNativeModulesBuildVariants.containsKey(nameCleansed)) {
reactNativeModulesBuildVariants
.get(nameCleansed)
.forEach { buildVariant ->
if(dependencyConfiguration != null) {
"${buildVariant}${dependencyConfiguration}"
} else {
"${buildVariant}Implementation" project(path: ":${nameCleansed}")
}
}
} else {
if(dependencyConfiguration != null) {
"${dependencyConfiguration}"
} else {
implementation project(path: ":${nameCleansed}")
}
}
}
}
}
/**
* Code-gen a java file with all the detected ReactNativePackage instances automatically added
*
* @param outputDir
* @param generatedFileName
* @param generatedFileContentsTemplate
*/
void generatePackagesFile(File outputDir, String generatedFileName, String generatedFileContentsTemplate) {
ArrayList<HashMap<String, String>> packages = this.reactNativeModules
String packageName = this.packageName
String packageImports = ""
String packageClassInstances = ""
if (packages.size() > 0) {
def interpolateDynamicValues = {
it
// Before adding the package replacement mechanism,
// BuildConfig and R classes were imported automatically
// into the scope of the file. We want to replace all
// non-FQDN references to those classes with the package name
// of the MainApplication.
//
// We want to match "R" or "BuildConfig":
// - new Package(R.string…),
// - Module.configure(BuildConfig);
// ^ hence including (BuildConfig|R)
// but we don't want to match "R":
// - new Package(getResources…),
// - new PackageR…,
// - new Royal…,
// ^ hence excluding \w before and after matches
// and "BuildConfig" that has FQDN reference:
// - Module.configure(com.acme.BuildConfig);
// ^ hence excluding . before the match.
.replaceAll(~/([^.\w])(BuildConfig|R)([^\w])/, {
wholeString, prefix, className, suffix ->
"${prefix}${packageName}.${className}${suffix}"
})
}
packageImports = packages.collect {
"// ${it.name}\n${interpolateDynamicValues(it.packageImportPath)}"
}.join('\n')
packageClassInstances = ",\n " + packages.collect {
interpolateDynamicValues(it.packageInstance)
}.join(",\n ")
}
String generatedFileContents = generatedFileContentsTemplate
.replace("{{ packageImports }}", packageImports)
.replace("{{ packageClassInstances }}", packageClassInstances)
outputDir.mkdirs()
final FileTreeBuilder treeBuilder = new FileTreeBuilder(outputDir)
treeBuilder.file(generatedFileName).newWriter().withWriter { w ->
w << generatedFileContents
}
}
void generateCmakeFile(File outputDir, String generatedFileName, String generatedFileContentsTemplate) {
ArrayList<HashMap<String, String>> packages = this.reactNativeModules
String packageName = this.packageName
String codegenLibPrefix = "react_codegen_"
String libraryIncludes = ""
String libraryModules = ""
if (packages.size() > 0) {
libraryIncludes = packages.collect {
if (it.libraryName != null && it.cmakeListsPath != null) {
// If user provided a custom cmakeListsPath, let's honor it.
String nativeFolderPath = it.cmakeListsPath.replace("CMakeLists.txt", "")
"add_subdirectory($nativeFolderPath ${it.libraryName}_autolinked_build)"
} else {
null
}
}.minus(null).join('\n')
libraryModules = packages.collect {
it.libraryName ? "${codegenLibPrefix}${it.libraryName}" : null
}.minus(null).join('\n ')
}
String generatedFileContents = generatedFileContentsTemplate
.replace("{{ libraryIncludes }}", libraryIncludes)
.replace("{{ libraryModules }}", libraryModules)
outputDir.mkdirs()
final FileTreeBuilder treeBuilder = new FileTreeBuilder(outputDir)
treeBuilder.file(generatedFileName).newWriter().withWriter { w ->
w << generatedFileContents
}
}
void generateRncliCpp(File outputDir, String generatedFileName, String generatedFileContentsTemplate) {
ArrayList<HashMap<String, String>> packages = this.reactNativeModules
ArrayList<String> unstable_reactLegacyComponentNames = this.unstable_reactLegacyComponentNames
String rncliCppIncludes = ""
String rncliCppModuleProviders = ""
String rncliCppComponentDescriptors = ""
String rncliReactLegacyComponentDescriptors = ""
String rncliReactLegacyComponentNames = ""
String codegenComponentDescriptorsHeaderFile = "ComponentDescriptors.h"
String codegenReactComponentsDir = "react/renderer/components"
if (packages.size() > 0) {
rncliCppIncludes = packages.collect {
if (!it.libraryName) {
return null
}
def result = "#include <${it.libraryName}.h>"
if (it.componentDescriptors && it.componentDescriptors.size() > 0) {
result += "\n#include <${codegenReactComponentsDir}/${it.libraryName}/${codegenComponentDescriptorsHeaderFile}>"
}
result
}.minus(null).join('\n')
rncliCppModuleProviders = packages.collect {
it.libraryName ? """ auto module_${it.libraryName} = ${it.libraryName}_ModuleProvider(moduleName, params);
if (module_${it.libraryName} != nullptr) {
return module_${it.libraryName};
}""" : null
}.minus(null).join("\n")
rncliCppComponentDescriptors = packages.collect {
def result = ""
if (it.componentDescriptors && it.componentDescriptors.size() > 0) {
result += it.componentDescriptors.collect {
" providerRegistry->add(concreteComponentDescriptorProvider<${it}>());"
}.join('\n')
}
result
}.join("\n")
}
rncliReactLegacyComponentDescriptors = unstable_reactLegacyComponentNames.collect {
" providerRegistry->add(concreteComponentDescriptorProvider<UnstableLegacyViewManagerInteropComponentDescriptor<${it}>>());"
}.join("\n")
rncliReactLegacyComponentNames = unstable_reactLegacyComponentNames.collect {
"extern const char ${it}[] = \"${it}\";"
}.join("\n")
if (unstable_reactLegacyComponentNames && unstable_reactLegacyComponentNames.size() > 0) {
rncliCppIncludes += "\n#include <react/renderer/components/legacyviewmanagerinterop/UnstableLegacyViewManagerInteropComponentDescriptor.h>"
}
String generatedFileContents = generatedFileContentsTemplate
.replace("{{ rncliCppIncludes }}", rncliCppIncludes)
.replace("{{ rncliCppModuleProviders }}", rncliCppModuleProviders)
.replace("{{ rncliCppComponentDescriptors }}", rncliCppComponentDescriptors)
.replace("{{ rncliReactLegacyComponentDescriptors }}", rncliReactLegacyComponentDescriptors)
.replace("{{ rncliReactLegacyComponentNames }}", rncliReactLegacyComponentNames)
outputDir.mkdirs()
final FileTreeBuilder treeBuilder = new FileTreeBuilder(outputDir)
treeBuilder.file(generatedFileName).newWriter().withWriter { w ->
w << generatedFileContents
}
}
void generateRncliH(File outputDir, String generatedFileName, String generatedFileContentsTemplate) {
String generatedFileContents = generatedFileContentsTemplate
outputDir.mkdirs()
final FileTreeBuilder treeBuilder = new FileTreeBuilder(outputDir)
treeBuilder.file(generatedFileName).newWriter().withWriter { w ->
w << generatedFileContents
}
}
/**
* Runs a specified command using Runtime exec() in a specified directory.
* Throws when the command result is empty.
*/
String getCommandOutput(String[] command, File directory) {
try {
def output = ""
def cmdProcess = Runtime.getRuntime().exec(command, null, directory)
def bufferedReader = new BufferedReader(new InputStreamReader(cmdProcess.getInputStream()))
def buff = ""
def readBuffer = new StringBuffer()
while ((buff = bufferedReader.readLine()) != null) {
readBuffer.append(buff)
}
output = readBuffer.toString()
if (!output) {
this.logger.error("${LOG_PREFIX}Unexpected empty result of running '${command}' command.")
def bufferedErrorReader = new BufferedReader(new InputStreamReader(cmdProcess.getErrorStream()))
def errBuff = ""
def readErrorBuffer = new StringBuffer()
while ((errBuff = bufferedErrorReader.readLine()) != null) {
readErrorBuffer.append(errBuff)
}
throw new Exception(readErrorBuffer.toString())
}
return output
} catch (Exception exception) {
this.logger.error("${LOG_PREFIX}Running '${command}' command failed.")
throw exception
}
}
/**
* Runs a process to call the React Native CLI Config command and parses the output
*/
ArrayList<HashMap<String, String>> getReactNativeConfig() {
if (this.reactNativeModules != null) return this.reactNativeModules
ArrayList<HashMap<String, String>> reactNativeModules = new ArrayList<HashMap<String, String>>()
HashMap<String, ArrayList> reactNativeModulesBuildVariants = new HashMap<String, ArrayList>()
/**
* Resolve the CLI location from Gradle file
*
* @todo: Sometimes Gradle can be called outside of the JavaScript hierarchy (-p flag) which
* will fail to resolve the script and the dependencies. We should resolve this soon.
*
* @todo: `fastlane` has been reported to not work too.
*/
def cliResolveScript = "try {console.log(require('@react-native-community/cli').bin);} catch (e) {console.log(require('react-native/cli').bin);}"
String[] nodeCommand = ["node", "-e", cliResolveScript]
def cliPath = this.getCommandOutput(nodeCommand, this.root)
String[] reactNativeConfigCommand = ["node", cliPath, "config"]
def reactNativeConfigOutput = this.getCommandOutput(reactNativeConfigCommand, this.root)
def json
try {
json = new JsonSlurper().parseText(reactNativeConfigOutput)
} catch (Exception exception) {
throw new Exception("Calling `${reactNativeConfigCommand}` finished with an exception. Error message: ${exception.toString()}. Output: ${reactNativeConfigOutput}");
}
def dependencies = json["dependencies"]
def project = json["project"]["android"]
def reactNativeVersion = json["version"]
if (project == null) {
throw new Exception("React Native CLI failed to determine Android project configuration. This is likely due to misconfiguration. Config output:\n${json.toMapString()}")
}
def engine = new groovy.text.SimpleTemplateEngine()
dependencies.each { name, value ->
def platformsConfig = value["platforms"];
def androidConfig = platformsConfig["android"]
if (androidConfig != null && androidConfig["sourceDir"] != null) {
this.logger.info("${LOG_PREFIX}Automatically adding native module '${name}'")
HashMap reactNativeModuleConfig = new HashMap<String, String>()
def nameCleansed = name.replaceAll('[~*!\'()]+', '_').replaceAll('^@([\\w-.]+)/', '$1_')
reactNativeModuleConfig.put("name", name)
reactNativeModuleConfig.put("nameCleansed", nameCleansed)
reactNativeModuleConfig.put("androidSourceDir", androidConfig["sourceDir"])
reactNativeModuleConfig.put("packageInstance", androidConfig["packageInstance"])
reactNativeModuleConfig.put("packageImportPath", androidConfig["packageImportPath"])
reactNativeModuleConfig.put("libraryName", androidConfig["libraryName"])
reactNativeModuleConfig.put("componentDescriptors", androidConfig["componentDescriptors"])
reactNativeModuleConfig.put("cmakeListsPath", androidConfig["cmakeListsPath"])
if (androidConfig["buildTypes"] && !androidConfig["buildTypes"].isEmpty()) {
reactNativeModulesBuildVariants.put(nameCleansed, androidConfig["buildTypes"])
}
if(androidConfig.containsKey("dependencyConfiguration")) {
reactNativeModuleConfig.put("dependencyConfiguration", androidConfig["dependencyConfiguration"])
} else if (project.containsKey("dependencyConfiguration")) {
def bindings = ["dependencyName": nameCleansed]
def template = engine.createTemplate(project["dependencyConfiguration"]).make(bindings)
reactNativeModuleConfig.put("dependencyConfiguration", template.toString())
}
this.logger.trace("${LOG_PREFIX}'${name}': ${reactNativeModuleConfig.toMapString()}")
reactNativeModules.add(reactNativeModuleConfig)
} else {
this.logger.info("${LOG_PREFIX}Skipping native module '${name}'")
}
}
return [reactNativeModules, reactNativeModulesBuildVariants, json["project"]["android"], reactNativeVersion];
}
}
/*
* Sometimes Gradle can be called outside of JavaScript hierarchy. Detect the directory
* where build files of an active project are located.
*/
def projectRoot = rootProject.projectDir
def autoModules = new ReactNativeModules(logger, projectRoot)
def reactNativeVersionRequireNewArchEnabled(autoModules) {
def rnVersion = autoModules.reactNativeVersion
def regexPattern = /^(\d+)\.(\d+)\.(\d+)(?:-(\w+(?:[-.]\d+)?))?$/
if (rnVersion =~ regexPattern) {
def result = (rnVersion =~ regexPattern).findAll().first()
def major = result[1].toInteger()
if (major > 0 && major < 1000) {
return true
}
}
return false
}
/** -----------------------
* Exported Extensions
* ------------------------ */
ext.applyNativeModulesSettingsGradle = { DefaultSettings defaultSettings ->
autoModules.addReactNativeModuleProjects(defaultSettings)
}
ext.applyNativeModulesAppBuildGradle = { Project project ->
autoModules.addReactNativeModuleDependencies(project)
def generatedSrcDir = new File(buildDir, "generated/rncli/src/main/java")
def generatedCodeDir = new File(generatedSrcDir, generatedFilePackage.replace('.', '/'))
def generatedJniDir = new File(buildDir, "generated/rncli/src/main/jni")
task generatePackageList {
doLast {
autoModules.generatePackagesFile(generatedCodeDir, generatedFileName, generatedFileContentsTemplate)
}
}
task generateNewArchitectureFiles {
doLast {
autoModules.generateCmakeFile(generatedJniDir, "Android-rncli.cmake", cmakeTemplate)
autoModules.generateRncliCpp(generatedJniDir, "rncli.cpp", rncliCppTemplate)
autoModules.generateRncliH(generatedJniDir, "rncli.h", rncliHTemplate)
}
}
preBuild.dependsOn generatePackageList
def isNewArchEnabled = (project.hasProperty("newArchEnabled") && project.newArchEnabled == "true") ||
reactNativeVersionRequireNewArchEnabled(autoModules)
if (isNewArchEnabled) {
preBuild.dependsOn generateNewArchitectureFiles
}
android {
sourceSets {
main {
java {
srcDirs += generatedSrcDir
}
}
}
}
}
还记得在settings.gradle中有如下代码吗?
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
applyNativeModulesSettingsGradle(settings)
也就是在settings.gradle中引入了native_modules.gradle,并且随后调用了 applyNativeModulesSettingsGradle 方法。
那就以 applyNativeModulesSettingsGradle 方法为入口,来逐步的进行分析。
def autoModules = new ReactNativeModules(logger, projectRoot)
//该方法会在settings.gradle中被调用,作用是把RN需要的三方库include到settings.gradle中
ext.applyNativeModulesSettingsGradle = { DefaultSettings defaultSettings ->
autoModules.addReactNativeModuleProjects(defaultSettings)
}
可以看到,实际上这个方法就是调用了ReactNativeModules实例中的addReactNativeModuleProjects方法,我们重点来看下ReactNativeModules类
//部分源码
class ReactNativeModules {
//日志
private Logger logger
//Android包名
private String packageName
//根目录
private File root
//react-native模块
private ArrayList<HashMap<String, String>> reactNativeModules
//不稳定的遗留组件名称
private ArrayList<String> unstable_reactLegacyComponentNames
//react-native模块构建变体
private HashMap<String, ArrayList> reactNativeModulesBuildVariants
//react-native版本
private String reactNativeVersion
private static String LOG_PREFIX = ":ReactNative:"
ReactNativeModules(Logger logger, File root) {
this.logger = logger
this.root = root
//获取react-native配置
def (nativeModules, reactNativeModulesBuildVariants, androidProject, reactNativeVersion) = this.getReactNativeConfig()
this.reactNativeModules = nativeModules
this.reactNativeModulesBuildVariants = reactNativeModulesBuildVariants
this.packageName = androidProject["packageName"]
this.unstable_reactLegacyComponentNames = androidProject["unstable_reactLegacyComponentNames"]
this.reactNativeVersion = reactNativeVersion
}
}
首先在创建ReactNativeModules实例的时候,会调用getReactNativeConfig 方法获取react-native的配置信息,随后把这些配置信息保存到ReactNativeModules实例中。
我们接着看一下 getReactNativeConfig 方法
下面的代码我增加了些注释,方便大家理解
/**
* 执行react-native config命令,获取react-native配置
* @return
*/
ArrayList<HashMap<String, String>> getReactNativeConfig() {
//如果已经获取过配置,直接返回
if (this.reactNativeModules != null) return this.reactNativeModules
//存储react-native模块
ArrayList<HashMap<String, String>> reactNativeModules = new ArrayList<HashMap<String, String>>()
//存储react-native模块构建变体
HashMap<String, ArrayList> reactNativeModulesBuildVariants = new HashMap<String, ArrayList>()
/**
* 执行一段脚本,获取react-native-cli的路径
* 最终获取的结果:xxx/node_modules/@react-native-community/cli/build/bin.js
*/
def cliResolveScript = "try {console.log(require('@react-native-community/cli').bin);} catch (e) {console.log(require('react-native/cli').bin);}"
String[] nodeCommand = ["node", "-e", cliResolveScript]
def cliPath = this.getCommandOutput(nodeCommand, this.root)
/**
* 执行 node xxx/node_modules/@react-native-community/cli/build/bin.js config 获取rn配置的结果
* 这个node命令执行的逻辑比较复杂,内部的流程很多,大致上就是调用了react-native-cli的config命令,从而获取到了RN的版本,配置,依赖库等关键信息
*
*/
String[] reactNativeConfigCommand = ["node", cliPath, "config"]
def reactNativeConfigOutput = this.getCommandOutput(reactNativeConfigCommand, this.root)
def json
try {
//将json字符串转换成json对象
json = new JsonSlurper().parseText(reactNativeConfigOutput)
} catch (Exception exception) {
throw new Exception("Calling `${reactNativeConfigCommand}` finished with an exception. Error message: ${exception.toString()}. Output: ${reactNativeConfigOutput}");
}
//获取react-native的依赖模块
def dependencies = json["dependencies"]
//获取react-native的android配置
def project = json["project"]["android"]
//获取react-native的版本
def reactNativeVersion = json["version"]
if (project == null) {
throw new Exception("React Native CLI failed to determine Android project configuration. This is likely due to misconfiguration. Config output:\n${json.toMapString()}")
}
def engine = new groovy.text.SimpleTemplateEngine()
//处理react-native的依赖模块
dependencies.each { name, value ->
//获取react-native模块的android配置
def platformsConfig = value["platforms"];
//获取android配置
def androidConfig = platformsConfig["android"]
if (androidConfig != null && androidConfig["sourceDir"] != null) {
this.logger.info("${LOG_PREFIX}Automatically adding native module '${name}'")
HashMap reactNativeModuleConfig = new HashMap<String, String>()
def nameCleansed = name.replaceAll('[~*!\'()]+', '_').replaceAll('^@([\\w-.]+)/', '$1_')
reactNativeModuleConfig.put("name", name)
reactNativeModuleConfig.put("nameCleansed", nameCleansed)
reactNativeModuleConfig.put("androidSourceDir", androidConfig["sourceDir"])
reactNativeModuleConfig.put("packageInstance", androidConfig["packageInstance"])
reactNativeModuleConfig.put("packageImportPath", androidConfig["packageImportPath"])
reactNativeModuleConfig.put("libraryName", androidConfig["libraryName"])
reactNativeModuleConfig.put("componentDescriptors", androidConfig["componentDescriptors"])
reactNativeModuleConfig.put("cmakeListsPath", androidConfig["cmakeListsPath"])
if (androidConfig["buildTypes"] && !androidConfig["buildTypes"].isEmpty()) {
reactNativeModulesBuildVariants.put(nameCleansed, androidConfig["buildTypes"])
}
if (androidConfig.containsKey("dependencyConfiguration")) {
reactNativeModuleConfig.put("dependencyConfiguration", androidConfig["dependencyConfiguration"])
} else if (project.containsKey("dependencyConfiguration")) {
def bindings = ["dependencyName": nameCleansed]
def template = engine.createTemplate(project["dependencyConfiguration"]).make(bindings)
reactNativeModuleConfig.put("dependencyConfiguration", template.toString())
}
this.logger.trace("${LOG_PREFIX}'${name}': ${reactNativeModuleConfig.toMapString()}")
reactNativeModules.add(reactNativeModuleConfig)
} else {
this.logger.info("${LOG_PREFIX}Skipping native module '${name}'")
}
}
//返回数据
return [reactNativeModules, reactNativeModulesBuildVariants, json["project"]["android"], reactNativeVersion];
}
}
可以看到,getReactNativeConfig 主要做了以下几件事情
- 通过node命令获取react-native-cli的路径
node -e "try {console.log(require('@react-native-community/cli').bin);} catch (e) {console.log(require('react-native/cli').bin);}"
- 这里实际上就是通过node -e 执行一段js代码,上面的js代码会从当前目录的node_modules中获取cli的路径.
- 返回值是一个路径,示例:xxx/node_modules/@react-native-community/cli/build/bin.js
- 接着执行node xxx/node_modules/@react-native-community/cli/build/bin.js config命令,获取react-native的配置信息
- 这个node命令执行的逻辑比较复杂,内部的流程很多,后面再详细分析
- 返回值是一个json字符串,包含了react-native的版本,配置,依赖库等关键信息
- 最后把这些配置信息处理以下保存到ReactNativeModules实例中
下面接着看一下调用 autoModules.addReactNativeModuleProjects(defaultSettings) 的 addReactNativeModuleProjects 方法的源码
/**
* Include the react native modules android projects and specify their project directory
*/
void addReactNativeModuleProjects(DefaultSettings defaultSettings) {
reactNativeModules.forEach { reactNativeModule ->
String nameCleansed = reactNativeModule["nameCleansed"]
String androidSourceDir = reactNativeModule["androidSourceDir"]
System.out.println("nameCleansed: ${nameCleansed}, androidSourceDir: ${androidSourceDir}")
defaultSettings.include(":${nameCleansed}")
defaultSettings.project(":${nameCleansed}").projectDir = new File("${androidSourceDir}")
}
}
可以看到,实际上就是把通过 getReactNativeConfig 获取到的 reactNativeModules 信息,添加到settings.gradle中
看下打印出来的值:
nameCleansed: react-native-device-info, androidSourceDir: /Users/yuzhiqiang/workspace/RN/personal/RNProjectAnalysis/node_modules/react-native-device-info/android
就相当于我们在setting.gradle中手动添加了一个模块
include ':react-native-device-info'
project(':react-native-device-info').projectDir = new File('/Users/yuzhiqiang/workspace/RN/personal/RNProjectAnalysis/node_modules/react-native-device-info/android')
同理,在app模块的build.gradle中,有如下代码
//应用了一个脚本文件
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
applyNativeModulesAppBuildGradle(project)
同样看下 applyNativeModulesAppBuildGradle 方法的源码
ext.applyNativeModulesAppBuildGradle = { Project project ->
autoModules.addReactNativeModuleDependencies(project)
def generatedSrcDir = new File(buildDir, "generated/rncli/src/main/java")
def generatedCodeDir = new File(generatedSrcDir, generatedFilePackage.replace('.', '/'))
def generatedJniDir = new File(buildDir, "generated/rncli/src/main/jni")
task generatePackageList {
doLast {
autoModules.generatePackagesFile(generatedCodeDir, generatedFileName, generatedFileContentsTemplate)
}
}
task generateNewArchitectureFiles {
doLast {
autoModules.generateCmakeFile(generatedJniDir, "Android-rncli.cmake", cmakeTemplate)
autoModules.generateRncliCpp(generatedJniDir, "rncli.cpp", rncliCppTemplate)
autoModules.generateRncliH(generatedJniDir, "rncli.h", rncliHTemplate)
}
}
preBuild.dependsOn generatePackageList
def isNewArchEnabled = (project.hasProperty("newArchEnabled") && project.newArchEnabled == "true") ||
reactNativeVersionRequireNewArchEnabled(autoModules)
if (isNewArchEnabled) {
preBuild.dependsOn generateNewArchitectureFiles
}
android {
sourceSets {
main {
java {
srcDirs += generatedSrcDir
}
}
}
}
}
首先第一步就看到了 autoModules.addReactNativeModuleDependencies(project) 方法,很明显,这个方法跟在settings.gradle中调用的方法类似,是用来添加依赖的。 源码如下:
/**
* 添加react-native模块依赖到app项目
* @param appProject
*/
void addReactNativeModuleDependencies(Project appProject) {
reactNativeModules.forEach { reactNativeModule ->
def nameCleansed = reactNativeModule["nameCleansed"]
def dependencyConfiguration = reactNativeModule["dependencyConfiguration"]
appProject.dependencies {
if (reactNativeModulesBuildVariants.containsKey(nameCleansed)) {
reactNativeModulesBuildVariants
.get(nameCleansed)
.forEach { buildVariant ->
if (dependencyConfiguration != null) {
"${buildVariant}${dependencyConfiguration}"
} else {
System.out.println("" + nameCleansed + "${buildVariant}Implementation project(path: \":${nameCleansed}\")")
"${buildVariant}Implementation" project(path: ":${nameCleansed}")
}
}
} else {
if (dependencyConfiguration != null) {
"${dependencyConfiguration}"
} else {
// 把依赖添加到app模块里,相当于 implementation project(path: ":xxx")
implementation project(path: ":${nameCleansed}")
}
}
}
}
}
接着,再来看下 applyNativeModulesAppBuildGradle 后续的逻辑。
在完成了app模块的依赖添加之后,紧接着会声明一个generatePackageList 的task,这个task主要就是做了一件事情,就是生成一个java文件,这个java文件里面包含了所有的react-native模块的信息。
task generatePackageList {
doLast {
autoModules.generatePackagesFile(generatedCodeDir, generatedFileName, generatedFileContentsTemplate)
}
}
来看看 generatePackagesFile 方法里的逻辑。
/**
* 通过上面定义的模版生成一个PackageList.java文件,替换导包和实例
* @param outputDir
* @param generatedFileName
* @param generatedFileContentsTemplate
*/
void generatePackagesFile(File outputDir, String generatedFileName, String generatedFileContentsTemplate) {
ArrayList<HashMap<String, String>> packages = this.reactNativeModules
String packageName = this.packageName
String packageImports = ""
String packageClassInstances = ""
System.out.println("outputDir: ${outputDir}, generatedFileName: ${generatedFileName}, generatedFileContentsTemplate: ${generatedFileContentsTemplate}")
System.out.println("packages: ${packages}")
if (packages.size() > 0) {
/**
* 针对BuildConfig和R的引用,进行替换,确保使用的是正确的项目路径和包名
*/
def interpolateDynamicValues = {
it
// Before adding the package replacement mechanism,
// BuildConfig and R classes were imported automatically
// into the scope of the file. We want to replace all
// non-FQDN references to those classes with the package name
// of the MainApplication.
//
// We want to match "R" or "BuildConfig":
// - new Package(R.string…),
// - Module.configure(BuildConfig);
// ^ hence including (BuildConfig|R)
// but we don't want to match "R":
// - new Package(getResources…),
// - new PackageR…,
// - new Royal…,
// ^ hence excluding \w before and after matches
// and "BuildConfig" that has FQDN reference:
// - Module.configure(com.acme.BuildConfig);
// ^ hence excluding . before the match.
.replaceAll(~/([^.\w])(BuildConfig|R)([^\w])/, { wholeString, prefix, className, suffix -> "${prefix}${packageName}.${className}${suffix}"
})
}
//拼接导包
packageImports = packages.collect {
"// ${it.name}\n${interpolateDynamicValues(it.packageImportPath)}"
}.join('\n')
System.out.println("""packageImports: ${packageImports}""")
//拼接实例
packageClassInstances = ",\n " + packages.collect {
interpolateDynamicValues(it.packageInstance)
}.join(",\n ")
System.out.println("""packageClassInstances: ${packageClassInstances}""")
}
String generatedFileContents = generatedFileContentsTemplate
.replace("{{ packageImports }}", packageImports)
.replace("{{ packageClassInstances }}", packageClassInstances)
System.out.println("generatedFileContents: ${generatedFileContents}")
//输出文件
outputDir.mkdirs()
final FileTreeBuilder treeBuilder = new FileTreeBuilder(outputDir)
treeBuilder.file(generatedFileName).newWriter().withWriter { w -> w << generatedFileContents
}
}
加了些注释,可以看到,实际上就是用源码中的 generatedFileContentsTemplate 模版字符串,替换了一些变量,生成了 PackageList.java 文件。 后续在执行 preBuild 任务之前,会先执行generatePackageList任务,prebuild 是 gradle 执行阶段生命周期中的一个基础任务,只要执行gradle build命令,就会执行prebuild任务,在执行 preBuild 任务之前,会先执行 generatePackageList 任务。
//在执行 preBuild 任务之前,先执行generatePackageList任务
preBuild.dependsOn generatePackageList
至于后面的 generateNewArchitectureFiles 任务,是用来生成一些新架构所需文件,跟上面逻辑类似。
task generateNewArchitectureFiles {
doLast {
autoModules.generateCmakeFile(generatedJniDir, "Android-rncli.cmake", cmakeTemplate)
autoModules.generateRncliCpp(generatedJniDir, "rncli.cpp", rncliCppTemplate)
autoModules.generateRncliH(generatedJniDir, "rncli.h", rncliHTemplate)
}
}
preBuild.dependsOn generatePackageList
def isNewArchEnabled = (project.hasProperty("newArchEnabled") && project.newArchEnabled == "true") ||
reactNativeVersionRequireNewArchEnabled(autoModules)
if (isNewArchEnabled) {
preBuild.dependsOn generateNewArchitectureFiles
}
下面是生成后的代码位置
生成好的PackageList代码会在 MainApplication 中被用到。
到这里,整个流程大致上就清楚了,下面我们就可以回答下上一篇文章中提出的问题。
为什么在使用RN插件时,只需要执行一下 yarn add react-native-device-info 后就可以直接在前端代码中使用了,而不需要关心native方面的代码。
实际上在Android部分是由gradle插件以及 native_modules.gradle 脚本还有结合前端的cli工具,帮我们做了很多事情。
到这里我们基本把 native_modules.gradle 中的逻辑分析完毕了,总结一下,也能够初步的回答上面的问题了:
- 通过执行cli命令获取react-native的配置信息,其中包含了react-native的版本,配置,依赖库等关键信息
- 把react-native的依赖库信息进行处理,把模块添加到settings.gradle中,以便于后续在模块中依赖使用
- 把react-native的模块通过源码依赖的方式添加到app模块中
- 生成一个PackageList.java文件,里面包含了所有的react-native模块的信息
- 如果是新架构,还会生成一些新架构所需的文件,主要是jin相关的文件
- 最后在app模块的build.gradle中,会把生成好的PackageList.java文件引入到MainApplication中使用
这样,我们就可以在前端代码中直接使用react-native-device-info这个模块了。
到这里,算是初步对Android端RN项目构建的基本流程分析的差不多了。
本篇文章我们遗留了一个步骤中流程的分析是:执行node xxx/node_modules/@react-native-community/cli/build/bin.js config命令,获取react-native的配置信息
实际上,获取react-native的配置信息是非常重要的一个环节,是由前端cli来完成的,这个我们后续再来分析。文章来源:https://www.toymoban.com/news/detail-841733.html
感谢阅读,觉有有帮助点赞支持,如果有任何疑问或建议,欢迎在评论区留言。如需转载,请注明出处:喻志强的博客 ,谢谢!文章来源地址https://www.toymoban.com/news/detail-841733.html
到了这里,关于ReactNative项目构建分析与思考之native_modules.gradle的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!