如何将React Native视图转为Android可用库并解决依赖缺失问题？

一、让AAR包含Node_modules中的原生依赖 #

直接将com.android.application改为library生成的AAR不会自动打包第三方RN库的原生代码，需要手动配置Gradle合并这些依赖：

1. 配置library模块的build.gradle

   • 先确保RN项目已完成自动链接（或react-native link），让第三方库原生代码关联到项目。
   • 在library模块的build.gradle中添加依赖收集逻辑：

     android {
         // 其他配置保持不变
         sourceSets {
             main {
                 // 引入第三方RN库的Java/Kotlin源码
                 java.srcDirs += fileTree(dir: "../node_modules", include: "**/android/src/main/java/**")
                 // 引入第三方RN库的JNI库（若有）
                 jniLibs.srcDirs += fileTree(dir: "../node_modules", include: "**/android/src/main/jniLibs/**")
             }
         }
     }
     
     dependencies {
         // 声明RN核心依赖及第三方RN库的依赖
         implementation "com.facebook.react:react-native:${reactNativeVersion}"
         // 示例：添加react-native-vector-icons的依赖
         implementation project(path: ':react-native-vector-icons')
     }
     

   • 需在settings.gradle中导入node_modules中的RN库为子项目：

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

2. 合并第三方库资源
   部分RN库自带drawable、layout等资源，需在build.gradle中开启资源合并：

   android {
       defaultConfig {
           // 按需配置支持的语言
           resourceConfigurations += ["en", "zh-rCN"]
       }
       sourceSets {
           main {
               res.srcDirs += fileTree(dir: "../node_modules", include: "**/android/src/main/res/**")
           }
       }
   }
   

3. 处理JNI库打包
   上述jniLibs.srcDirs配置已覆盖JNI库的引入，打包时会自动合并到AAR的jniLibs目录。

二、更优集成方案：独立RN容器模块 #

若不想手动处理依赖合并，推荐将RN视图封装为独立Android Library模块，配合预打包JS bundle实现一键集成：

1. 预打包JS Bundle
   在RN项目根目录执行命令生成离线bundle及资源：

   react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
   

   将生成的bundle和资源移动到library模块对应目录。

2. 封装RN容器
   在library模块中编写封装好的RN容器（Activity或Fragment）：

   class RNViewContainerActivity : AppCompatActivity() {
       private lateinit var reactRootView: ReactRootView
       private lateinit var reactInstanceManager: ReactInstanceManager
   
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           SoLoader.init(this, false)
   
           reactRootView = ReactRootView(this)
           val packages = PackageList(application).packages.apply {
               // 添加自定义RN包
               add(YourCustomRNPackage())
           }
   
           reactInstanceManager = ReactInstanceManager.builder()
               .setApplication(application)
               .setCurrentActivity(this)
               .setBundleAssetName("index.android.bundle")
               .setJSMainModulePath("index")
               .addPackages(packages)
               .setUseDeveloperSupport(BuildConfig.DEBUG)
               .setInitialLifecycleState(LifecycleState.RESUMED)
               .build()
   
           reactRootView.startReactApplication(reactInstanceManager, "YourRNComponentName", null)
           setContentView(reactRootView)
       }
   
       override fun onPause() {
           super.onPause()
           reactInstanceManager.onHostPause(this)
       }
   
       override fun onResume() {
           super.onResume()
           reactInstanceManager.onHostResume(this)
       }
   
       override fun onDestroy() {
           super.onDestroy()
           reactInstanceManager.onHostDestroy(this)
           reactRootView.unmountReactApplication()
       }
   }
   

3. 自动导入RN依赖
   编写Gradle脚本自动扫描node_modules中的RN库，避免手动配置：

   // 在settings.gradle中添加
   def reactNativeProjectDir = new File(rootProject.projectDir, "../node_modules/react-native")
   apply from: new File(reactNativeProjectDir, "react.gradle")
   
   // 自动扫描并导入所有RN第三方库
   fileTree(dir: "../node_modules", include: "*/android").each { dir ->
       def moduleName = dir.parentFile.name.replace('-', '_')
       include ":$moduleName"
       project(":$moduleName").projectDir = dir
   }
   

三、注意事项 #

• 确保原生应用与RN库的React Native版本一致，避免兼容性问题。
• 若原生应用已包含RN依赖，打包AAR时用compileOnly代替implementation声明RN核心依赖，避免重复打包。
• 需在原生应用的AndroidManifest.xml中声明RN库所需的权限。

内容的提问来源于stack exchange，提问作者Sughosh