ReactNative-如何引入ReactAndroid源码模块到主工程

如何集成

以下内容基于RN 0.61.5版本(最新版本已经不存在本文所说的so冲突问题,官方在build.gradle中已经加上pickFirst)

在新建一个RN项目并安装完node模块依赖后,在根目录执行

npm run android

即可启动编译并安装到目标设备

android工程依赖的本地maven库配置

        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }

工程依赖配置

    implementation "com.facebook.react:react-native:+"  // From node_modules

如果我们想开发学习ReactAndroid的源码,希望在工程中直接配置ReactAndroid module,首先需要在Settings.gradle中配置ReactAndroid工程:

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

然后在app build.gradle中引入

    //implementation "com.facebook.react:react-native:+"  // From node_modules
    implementation project(":ReactAndroid")

集成结束,可以开始愉快的编译了

so冲突解决

编译会出现如下错误:

* What went wrong:
Execution failed for task ':app:transformNativeLibsWithMergeJniLibsForDebug'.
> More than one file was found with OS independent path 'lib/arm64-v8a/libc++_shared.so'

说明存在so冲突了,都告诉是哪个task了,接着看下详细的冲突信息,在app build.gradle添加如下代码

android.applicationVariants.all{ variant ->
    def targetName = variant.name.capitalize()

    if (targetName == "Debug"){
        tasks.findByName("transformNativeLibsWithMergeJniLibsFor${targetName}").doFirst {
            inputs.files.files.each {File file ->
                def match = file.path =~ "^.*/armeabi-v7a/libc\\+\\+_shared\\.so\$"
                if (match.size() > 0){
                    println "dulpicate file path ${file.path}"
                }
            }
        }
    }
}

接着重新编译,查看输出信息

dulpicate file path /Users/**/.gradle/caches/transforms-2/files-2.1/594e854423337ea0f46904d533b98b3f/jni/armeabi-v7a/libc++_shared.so
dulpicate file path /Users/**/mywork/rn/AwesomeProject/node_modules/react-native/ReactAndroid/build/intermediates/intermediate-jars/debug/jni/armeabi-v7a/libc++_shared.so

可以看出,ReactAndroid和594e854423337ea0f46904d533b98b3f这个maven库都包含该so,导致冲突了

接着cd到594e854423337ea0f46904d533b98b3f对应的目录,查看AndroidManifest文件信息,可以看到包名为

com.facebook.flipper

这个库是在ReactAndroid引入的,flipper主要是用于开发调试用的,所以只在debug阶段引入

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.yoga'
        exclude group:'com.facebook.flipper', module: 'fbjni'
        exclude group:'com.facebook.litho', module: 'litho-annotations'
    }

解决的方式有两个

    packagingOptions {
        pickFirst '**/libc++_shared.so'
    }
    //或者
    android.applicationVariants.all{ variant ->
    def targetName = variant.name.capitalize()

    if (targetName == "Debug"){
        tasks.findByName("transformNativeLibsWithMergeJniLibsFor${targetName}").doFirst {
            inputs.files.files.each {File file ->
                def match = file.path =~ "^.*\\.gradle/caches.*libc\\+\\+_shared\\.so\$"
                if (match.size() > 0){
                    file.delete()
                }
            }
        }
    }
}

疑问

为什么都通过maven库方式引入的时候,不会有冲突,但是改成工程子project引入后,就会有冲突了呢?我觉得这说明gradle编译时,对于maven库之间的冲突和子project与maven库之间的冲突,在merge时,校验的严格程度是不一样的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native中的VirtualizedList组件是用于高效渲染大量数据的列表视图组件。虚拟化列表在滚动时只加载可见部分的数据,而非一次性渲染所有的列表项,从而提高了性能。 VirtualizedList组件的源码解析可以从以下几个方面进行: 1. 数据源:VirtualizedList接受一个名为data的props,用于表示要渲染的数据源。该数据源可以是一个数组或者是一个带有迭代方法的对象。在源码中,会使用this.props.data来获取传入的数据源。 2. 视图创建:在VirtualizedList组件的源码中,会通过ViewabilityHelper类型来管理可见项和滚动状态。ViewabilityHelper会根据滚动位置计算哪些列表项是可见的,并且会在必要时创建和删除列表项的视图。 3. 渲染性能优化:为了提高滚动的性能,VirtualizedList使用了windowSize属性,该属性定义了可见区域外额外渲染的列表项数量。源码中会根据滚动的位置,动态加载和卸载视图,以保证只渲染用户可见的列表项。 4. 列表项更新:当列表项的数据发生变化时,VirtualizedList会根据数据的变化更新相应的列表项。在源码中,会使用shouldItemUpdate()方法来判断列表项是否需要更新。 5. 交互处理:VirtualizedList会对滚动事件、滚动结束事件等进行处理,以便实现列表的滚动效果。在源码中,会使用onScroll()和onScrollEndDrag()等方法来处理相关交互事件。 总的来说,VirtualizedList作为React Native中高效渲染大量数据的列表视图组件,其源码实现了数据源管理、视图创建和销毁、渲染性能优化、列表项更新、交互处理等功能。通过深入源码的分析,可以更好地了解VirtualizedList组件的工作原理,并能更好地使用和定制该组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值