RN环境搭建

Native相关的知识以一个Android开发者的视角对React

Native

项目组织和构建流程有了一些粗浅的认识同时也对RN混合开发项目如何搭建又了一点小小的思考。

RN环境搭建

https://reactnative.cn/docs/environment-setup

创建好项目后我们来分析下就是一个标准的RN项目其中有一个node_modules是项目的依赖包。

根项目和一个ios也就是说android和ios项目是作为RN项目的子项目存在的。

来看下android下的代码是一个标准的Android项目直接使用Android

可以看到除了一个标准的Android项目外还有一个gradle-plugin的。

settings.gradle

file(../node_modules/react-native-community/cli-platform-android/native_modules.gradle);

applyNativeModulesSettingsGradle(settings)还通过includeBuild引入了一个RN插件

includeBuild(../node_modules/react-native/gradle-plugin)再来接着看看根目录下build.gradle文件中的内容

buildscript

{google()mavenCentral()}dependencies

{classpath(com.android.tools.build:gradle)//RN插件classpath(com.facebook.react:react-native-gradle-plugin)classpath(org.jetbrains.kotlin:kotlin-gradle-plugin)}

//应用了一个叫做com.facebook.react.rootproject的插件

apply

com.facebook.react.rootproject接着看下app目录下的build.gradle文件

apply

file(../node_modules/react-native)//

The

../node_modules/react-native/codegen//

codegenDir

file(../node_modules/react-native/codegen)//

The

../node_modules/react-native/cli.js//

cliFile

file(../node_modules/react-native/cli.js)/*

Variants

MyApplication.android.bundle////

The

file(../js/MyApplication.android.js)////

list

https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle//

extraPackagerArgs

$rootDir/my-custom-hermesc/bin/hermesc////

The

rootProject.ext.ndkVersioncompileSdk

rootProject.ext.compileSdkVersionnamespace

com.yzq.rn_project_analysisdefaultConfig

{applicationId

com.yzq.rn_project_analysisminSdkVersion

rootProject.ext.minSdkVersiontargetSdkVersion

rootProject.ext.targetSdkVersionversionCode

1versionName

file(debug.keystore)storePassword

androidkeyAlias

https://reactnative.dev/docs/signed-apk-android.signingConfig

signingConfigs.debugminifyEnabled

enableProguardInReleaseBuildsproguardFiles

getDefaultProguardFile(proguard-android.txt),

proguard-rules.pro}}

Pluginimplementation(com.facebook.react:react-android)implementation(com.facebook.react:flipper-integration)if

{implementation(com.facebook.react:hermes-android)}

else

file(../../node_modules/react-native-community/cli-platform-android/native_modules.gradle);

applyNativeModulesAppBuildGradle(project)

可以看到工程的依赖配置也比较的清晰主要是配置了一些Android的基本配置然后应用了RN的插件和脚本。

三方库使用

三方库在RN中有着非常重要的地位因为RN本身的功能是有限的所以需要依赖一些三方库来实现一些功能。

三方库一般提供了跨平台的支持对前端开发同学来讲是非常友好的不需要去了解原生的开发技术就可以实现一些原生的功能。

下面随便去

react-native-device-info安装完成后会发现项目根目录下的package.json文件中多了一条依赖

然后在RN项目中使用一下

react-native-device-info;Button

title{deviceInfo}

{DeviceInfo.getAndroidId().***n((id)

然后重新运行项目

使用起来非常简单可以看到这里实际上完全不需要关心native端的代码就可以实现一些原生的功能。

那作为

正常来讲如果我们在原生项目中使用三方库是需要引入三方库的jar包或者aar包的大部分sdk还需要进行初始化操作然后才能调用相关的方法

只需要一个yarn

react-native-device-info就能让RN项目使用原生的功能这是怎么做到的呢

这个module是怎么引入的呢正常来讲在Android中我们想要引入一个本地的module需要在settings.gradle中include进来然后在build.gradle中引入依赖。

但是再次去看看settings.gradle和build.gradle文件发现并没有类似的代码那这个module是怎么引入的呢

apply

file(“…/node_modules/react-native-community/cli-platform-android/native_modules.gradle”);includeBuild(‘…/node_modules/react-native/gradle-plugin’)

我们先来分析一下react-native-gradle-plugin这个插件,这个插件是RN项目的核心插件它的作用是管理RN项目的依赖和配置。

com.facebook.reactcom.facebook.react.rootproject

我们先来看看

该插件在项目的根目录下的build.gradle文件中被应用了

/***

该插件的作用是确保app项目在库项目之前被配置以便在库项目被配置时可以使用app项目的配置**

constructor*/

{it.evaluationDependsOn(:app)}}}

代码非常少其作用就是是确保app项目在库项目之前被配置以便在库项目被配置时可以使用app项目的配置。

简单说就是app中会有一些rn相关的配置一些三方库中也会用到这些配置此时需要确保app项目的配置在库项目之前被配置以确保其他模块能够正常使用。

com.facebook.react

{//检查JVM版本不能低于17checkJvmVersion(project)//创建react配置val

extension

project.extensions.create(react,

project)//

project.rootProject.extensions.findByType(PrivateReactExtension::class.java)?:

project.rootProject.extensions.create(privateReact,

PrivateReactExtension::class.java,

project)//

如果项目中使用了com.android.application插件也就是app模块中会执行以下代码*/project.pluginManager.withPlugin(com.android.application)

{//

下面代码实际上就是把用户自定义的配置赋值给rootExtension就是把用户自定义的配置传递给上面创建好的一个私有配置项

privateReact*/rootExtension.root.set(extension.root)rootExtension.reactNativeDir.set(extension.reactNativeDir)rootExtension.codegenDir.set(extension.codegenDir)rootExtension.nodeExecutableAndArgs.set(extension.nodeExecutableAndArgs)println(rootExtension

root:

${rootExtension.root.get()})println(rootExtension

reactNativeDir:

${rootExtension.reactNativeDir.get()})println(rootExtension

codegenDir:

${rootExtension.codegenDir.get()})println(rootExtension

${rootExtension.nodeExecutableAndArgs.get()})/***

项目配置完成后执行以下代码*/project.afterEvaluate

{val

extension.reactNativeDir.get().asFileval

propertiesFile

ReactAndroid/gradle.properties)//获取版本号和groupNameval

readVersionAndGroupStrings(propertiesFile)val

versionString

versionAndGroupStrings.firstval

groupString

versionAndGroupStrings.second//配置依赖主要是做了依赖替换和统一版本的逻辑configureDependencies(project,

versionString,

groupString)//配置仓库configureRepositories(project,

reactNativeDir)}//配置NDKconfigureReactNativeNdk(project,

extension)//配置App的构建配置字段configureBuildConfigFieldsForApp(project,

extension)//配置开发端口

默认8081configureDevPorts(project)//处理老版本配置兼容性configureBackwardCompatibilityReactMap(project)//配置Java工具链确保项目中的

Java

版本configureJavaToolChains(project)//根据不同的构建类型配置不同的任务project.extensions.getByType(AndroidComponentsExtension::class.java).apply

variant

-//配置react任务用于执行react-native的打包操作project.configureReactTasks(variant

variant,

extension)}}//配置react-native-codegen用于生成所需代码configureCodegen(project,

extension,

ConfigurationconfigureBuildConfigFieldsForLibraries(project)configureNamespaceForLibraries(project)project.pluginManager.withPlugin(com.android.library)

extension,

Jvm.current()?.javaVersion?.majorVersionprintln(jvmVersion:

$jvmVersion)if

{project.logger.error(********************************************************************************ERROR:

requires

$jvmVersion********************************************************************************.trimIndent())exitProcess(1)}}创建react配置

val

project.extensions.create(react,

privateReact如果已经存在则获取用于在app项目和库项目之间共享配置

val

project.rootProject.extensions.findByType(PrivateReactExtension::class.java)?:

project.rootProject.extensions.create(privateReact,

PrivateReactExtension::class.java,

abstract

objects.directoryProperty().convention(root.dir(node_modules/react-native/codegen))

如果项目中使用了com.android.application插件也就是app模块中会执行以下代码

用户自定义的配置赋值给rootExtension就是把用户自定义的配置传递给上面创建好的一个私有配置项

privateReact

project.pluginManager.withPlugin(com.android.application)

{//

defaults).rootExtension.root.set(extension.root)rootExtension.reactNativeDir.set(extension.reactNativeDir)rootExtension.codegenDir.set(extension.codegenDir)rootExtension.nodeExecutableAndArgs.set(extension.nodeExecutableAndArgs)}配置依赖主要是做了依赖替换和统一版本的逻辑,这也就是为什么在app的build.gradle中的react

val

extension.reactNativeDir.get().asFile

val

ReactAndroid/gradle.properties)//获取版本号和groupName

val

readVersionAndGroupStrings(propertiesFile)

val

readVersionAndGroupStrings方法实际上就是从/node_modules/reactnative/ReactAndroid/gradle.properties文件中读取版本号和group字符串

/***

readVersionAndGroupStrings(propertiesFile:

File):

{println(readVersionAndGroupStrings:

$propertiesFile)val

Properties()propertiesFile.inputStream().use

reactAndroidProperties.load(it)

}val

reactAndroidProperties[INTERNAL_VERSION_NAME]

as?

(versionStringFromFile.startsWith(0.0.0)

-nightly-

{$versionStringFromFile-SNAPSHOT}

else

reactAndroidProperties[INTERNAL_PUBLISHING_GROUP]

as?

DEFAULT_INTERNAL_PUBLISHING_GROUPreturn

Pair(versionString,

groupString)}configureDependencies方法主要做了依赖替换和统一版本的逻辑

/***

DEFAULT_INTERNAL_PUBLISHING_GROUP)

{println(configureDependencies:

$versionString,

return//遍历所有项目project.rootProject.allprojects

eachProject

${eachProject.name})//遍历项目的所有配置eachProject.configurations.all

configuration

configuration.resolutionStrategy

用于配置解析策略一般用于配置依赖替换和强制使用指定版本*/configuration.resolutionStrategy.dependencySubstitution

{//获取依赖替换列表getDependencySubstitutions(versionString,groupString).forEach

(module,

-//将指定的依赖替换为目标依赖it.substitute(it.module(module)).using(it.module(dest)).because(reason)}}//强制使用指定版本configuration.resolutionStrategy.force(${groupString}:react-android:${versionString},${groupString}:flipper-integration:${versionString},)//如果用户没有选择使用夜间版本进行本地开发则强制使用hermes-android指定版本if

(!(eachProject.findProperty(INTERNAL_USE_HERMES_NIGHTLY)

as?

development.configuration.resolutionStrategy.force(${groupString}:hermes-android:${versionString})}}}}getDependencySubstitutions方法主要是生成需要进行依赖替换的列表

/***

getDependencySubstitutions(versionString:

String,groupString:

DEFAULT_INTERNAL_PUBLISHING_GROUP):

ListTripleString,

react-native替换为react-androiddependencySubstitution.add(Triple(com.facebook.react:react-native,${groupString}:react-android:${versionString},The

react-native

https://github.com/facebook/react-native/issues/35210.))//

hermes-engine替换为hermes-androiddependencySubstitution.add(Triple(com.facebook.react:hermes-engine,${groupString}:hermes-android:${versionString},The

hermes-engine

https://github.com/facebook/react-native/issues/35210.))//

groupString

com.facebook.react则修改react-android和hermes-android的Maven

groupif

DEFAULT_INTERNAL_PUBLISHING_GROUP)

{dependencySubstitution.add(Triple(com.facebook.react:react-android,${groupString}:react-android:${versionString},The

react-android

group.))dependencySubstitution.add(Triple(com.facebook.react:hermes-android,${groupString}:hermes-android:${versionString},The

hermes-android

dependencySubstitution}配置仓库源这个比较简单就是配置了一些依赖所需的仓库地址

fun

{println(configureRepositories:

$reactNativeDir)project.rootProject.allprojects

eachProject

(hasProperty(INTERNAL_REACT_NATIVE_MAVEN_LOCAL_REPO))

{val

property(INTERNAL_REACT_NATIVE_MAVEN_LOCAL_REPO)

StringmavenRepoFromURI(File(mavenLocalRepoPath).toURI())}//

add

nightlies.mavenRepoFromUrl(https://oss.sonatype.org/content/repositories/snapshots/)repositories.mavenCentral

repo

npmmavenRepoFromURI(File(reactNativeDir,

../jsc-android/dist).toURI())repositories.google()mavenRepoFromUrl(https://www.jitpack.io)}}}配置NDKNative

Development

configureReactNativeNdk(project:

Project,

{project.pluginManager.withPlugin(com.android.application)

{project.extensions.getByType(AndroidComponentsExtension::class.java).finalizeDsl

ext

(!project.isNewArchEnabled(extension))

{//

(ext.externalNativeBuild.cmake.path

null)

{ext.externalNativeBuild.cmake.path

File(extension.reactNativeDir.get().asFile,ReactAndroid/cmake-utils/default-app-setup/CMakeLists.txt)}//

Parameters

ext.defaultConfig.externalNativeBuild.cmake.argumentsif

(cmakeArgs.none

it.startsWith(-DPROJECT_BUILD_DIR)

{cmakeArgs.add(-DPROJECT_BUILD_DIR${project.layout.buildDirectory.get().asFile})}if

(cmakeArgs.none

it.startsWith(-DREACT_ANDROID_DIR)

{cmakeArgs.add(-DREACT_ANDROID_DIR${extension.reactNativeDir.file(ReactAndroid).get().asFile})}if

(cmakeArgs.none

{cmakeArgs.add(-DANDROID_STLc_shared)}//

Due

it.startsWith(-DANDROID_USE_LEGACY_TOOLCHAIN_FILE)

{cmakeArgs.add(-DANDROID_USE_LEGACY_TOOLCHAIN_FILEON)}val

architectures

project.getReactNativeArchitectures()//

abiFilters

{ext.defaultConfig.ndk.abiFilters.addAll(architectures)}}}}配置App的构建配置字段

/***

应用或库项目中启用buildConfig并添加了两个自定义的布尔类型的构建配置字段用于表示新架构是否启用以及是否启用了

Hermes

configureBuildConfigFieldsForApp(project:

Project,

{project.extensions.getByType(AndroidComponentsExtension::class.java).finalizeDsl

ext

trueext.defaultConfig.buildConfigField(boolean,IS_NEW_ARCHITECTURE_ENABLED,project.isNewArchEnabled(extension).toString())ext.defaultConfig.buildConfigField(boolean,

IS_HERMES_ENABLED,

project.isHermesEnabled.toString())}}project.pluginManager.withPlugin(com.android.application,

action)project.pluginManager.withPlugin(com.android.library,

action)}

project.properties[reactNativeDevServerPort]?.toString()

inspectorProxyPort

project.properties[reactNativeInspectorProxyPort]?.toString()

devServerPortval

{project.extensions.getByType(AndroidComponentsExtension::class.java).finalizeDsl

ext

-ext.defaultConfig.resValue(integer,react_native_dev_server_port,devServerPort)ext.defaultConfig.resValue(integer,

react_native_inspector_proxy_port,

inspectorProxyPort)}}project.pluginManager.withPlugin(com.android.application,

action)project.pluginManager.withPlugin(com.android.library,

action)}

configureBackwardCompatibilityReactMap(project:

Project)

(project.extensions.extraProperties.has(react))

reactMap

project.extensions.extraProperties.get(react)

as?

{project.logger.error(********************************************************************************ERROR:

Using

it.********************************************************************************.trimIndent())}

}//

project.extensions.extraProperties.set(react,

mapOfString,

react.internal.disableJavaVersionAlignment

set.if

(input.hasProperty(INTERNAL_DISABLE_JAVA_VERSION_ALIGNMENT))

{return}input.rootProject.allprojects

project

react.internal.disableJavaVersionAlignment

also.if

(project.hasProperty(INTERNAL_DISABLE_JAVA_VERSION_ALIGNMENT))

action

{project.extensions.getByType(AndroidComponentsExtension::class.java).finalizeDsl

ext-ext.compileOptions.sourceCompatibility

JavaVersion.VERSION_17ext.compileOptions.targetCompatibility

JavaVersion.VERSION_17}}project.pluginManager.withPlugin(com.android.application,

action)project.pluginManager.withPlugin(com.android.library,

action)project.pluginManager.withPlugin(org.jetbrains.kotlin.android)

{project.extensions.getByType(KotlinTopLevelExtension::class.java).jvmToolchain(17)}project.pluginManager.withPlugin(org.jetbrains.kotlin.jvm)

{project.extensions.getByType(KotlinTopLevelExtension::class.java).jvmToolchain(17)}}

//根据不同的构建类型配置不同的任务project.extensions.getByType(AndroidComponentsExtension::class.java).apply

variant

-//配置react任务用于执行react-native的打包操作project.configureReactTasks(variant

variant,

extension)}}configureReactTasks

扩展方法

Project.configureReactTasks(variant:

Variant,

variant.name.capitalizeCompat()val

targetPath

this.layout.buildDirectory.get().asFile//

Resources:

generated/assets/react/variant/index.android.bundleval

resourcesDir

generated/res/react/$targetPath)//

Bundle:

generated/assets/react/variant/index.android.bundleval

jsBundleDir

generated/assets/react/$targetPath)//

Sourcemap:

generated/sourcemaps/react/variant/index.android.bundle.mapval

jsSourceMapsDir

generated/sourcemaps/react/$targetPath)//

Intermediate

intermediates/sourcemaps/react/variant/index.android.bundle.packager.map//

Intermediate

intermediates/sourcemaps/react/variant/index.android.bundle.compiler.mapval

File(buildDir,

intermediates/sourcemaps/react/$targetPath)//

The

(config.enableHermesOnlyInVariants.get().isNotEmpty())

{config.enableHermesOnlyInVariants.get().contains(variant.name)

else

config.debuggableVariants.get().any

ignoreCase

}//配置新架构打包选项configureNewArchPackagingOptions(project,

config,

variant)//配置JS引擎打包选项configureJsEnginePackagingOptions(config,

variant,

isHermesEnabledInThisVariant)if

{val

tasks.register(createBundle${targetName}JsAndAssets,

{it.root.set(config.root)it.nodeExecutableAndArgs.set(config.nodeExecutableAndArgs)it.cliFile.set(cliFile)it.bundleCommand.set(config.bundleCommand)it.entryFile.set(detectedEntryFile(config,

entryFileEnvVariable))it.extraPackagerArgs.set(config.extraPackagerArgs)it.bundleConfig.set(config.bundleConfig)it.bundleAssetName.set(config.bundleAssetName)it.jsBundleDir.set(jsBundleDir)it.resourcesDir.set(resourcesDir)it.hermesEnabled.set(isHermesEnabledInThisVariant)it.minifyEnabled.set(!isHermesEnabledInThisVariant)it.devEnabled.set(false)it.jsIntermediateSourceMapsDir.set(jsIntermediateSourceMapsDir)it.jsSourceMapsDir.set(jsSourceMapsDir)it.hermesCommand.set(config.hermesCommand)it.hermesFlags.set(config.hermesFlags)it.reactNativeDir.set(config.reactNativeDir)}//将生成的资源目录添加到源集variant.sources.res?.addGeneratedSourceDirectory(bundleTask,BundleHermesCTask::resourcesDir)variant.sources.assets?.addGeneratedSourceDirectory(bundleTask,BundleHermesCTask::jsBundleDir)}}

配置react-native-codegen用于生成所需代码帮助我们避免编写重复代码的工具。

/***

configureBuildConfigFieldsForLibraries(appProject:

Project)

{appProject.rootProject.allprojects

subproject

-subproject.pluginManager.withPlugin(com.android.library)

{subproject.extensions.getByType(AndroidComponentsExtension::class.java).finalizeDsl

ext

configureNamespaceForLibraries(appProject:

Project)

{appProject.rootProject.allprojects

subproject

-subproject.pluginManager.withPlugin(com.android.library)

{subproject.extensions.getByType(AndroidComponentsExtension::class.java).finalizeDsl

ext

subproject.extensions.getByType(LibraryExtension::class.java)val

manifestFile

android.sourceSets.getByName(main).manifest.srcFilemanifestFile.takeIf

it.exists()

-getPackageNameFromManifest(file)?.let

packageName

packageName}}}}}}}如果项目中使用了com.android.library插件也就是library模块中会执行以下代码

配置react-native-codegen用于生成所需代码帮助我们避免编写重复代码的工具。

到这里我们基本就清楚了react-native-gradle-plugin这个插件的主要作用

做了一些编译环境的检查创建了一些配置项用于在app项目和库项目之间共享配置统一替换项目中的react-native相关的依赖并确保版本一致配置任务包括打包生成代码等

但是插件中并没有看到RN三方库依赖处理的逻辑所以并没有解答我们一开始的问题我们接着分析。

详情请看下一篇文章

ReactNative项目构建分析与思考之native_modules.gradle

感谢阅读觉有有帮助点赞支持如果有任何疑问或建议欢迎在评论区留言。

如需转载请注明出处喻志强的博客