如何在独立仓库的现有Android原生应用中运行React Native应用的工作流

嘿，我懂你现在的需求——手里有个已经跑起来的Android原生项目ProjectAndroid，同时还在单独开发一个跨iOS和Android的React Native项目ProjectReactNative，想实现从原生登录页跳转到RN的首页对吧？我之前也折腾过类似的场景，给你分享几个可行的方案：

方案一：把独立RN项目作为原生Android模块集成（保持仓库独立） #

这种方式能让两个项目的代码各自独立维护，同时原生项目可以直接调用RN的页面，适合需要频繁同步RN代码更新的场景。

具体步骤：

• 先把RN项目以Git子模块的方式引入原生项目（如果是本地项目直接复制也可以，但子模块更方便后续同步更新）：

  # 在ProjectAndroid根目录执行
  git submodule add 你的RN项目仓库地址.git react-native-module
  

• 修改ProjectAndroid根目录的settings.gradle，添加RN模块的引用：

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

• 在ProjectAndroid/app/build.gradle里添加依赖，注意RN核心库的版本要和你的ProjectReactNative完全一致：

  dependencies {
      // 你的其他原生依赖
      implementation project(':react-native-module')
      // 替换成你RN项目对应的版本
      implementation "com.facebook.react:react-native:0.72.0"
      implementation "com.facebook.react:hermes-android:0.72.0"
  }
  

• 在原生登录成功的逻辑里，添加RN页面的唤起代码：
  先新建一个专门承载RN页面的原生ReactNativeActivity，然后在登录成功的跳转逻辑里初始化RN并启动这个Activity：

  // 在登录成功的回调里写这段代码
  ReactInstanceManager reactInstanceManager = ReactInstanceManager.builder()
          .setApplication(getApplication())
          .setCurrentActivity(this)
          .setBundleAssetName("index.android.bundle")
          .setJSMainModulePath("index")
          .addPackage(new MainReactPackage())
          .setUseDeveloperSupport(BuildConfig.DEBUG)
          .setInitialLifecycleState(LifecycleState.RESUMED)
          .build();
  
  ReactRootView reactRootView = new ReactRootView(this);
  // 这里的"HomeScreen"要和RN项目里注册的组件名称一致
  reactRootView.startReactApplication(reactInstanceManager, "HomeScreen", null);
  
  // 跳转到承载RN的Activity
  Intent intent = new Intent(this, ReactNativeActivity.class);
  startActivity(intent);
  

• 开发阶段可以加载远程bundle调试，正式打包前要把RN的bundle和资源打包到原生项目：

  # 在ProjectReactNative根目录执行
  npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output ../ProjectAndroid/app/src/main/assets/index.android.bundle --assets-dest ../ProjectAndroid/app/src/main/res/
  

方案二：将RN项目打包成AAR供原生项目依赖 #

如果不需要频繁同步RN代码，或者想更方便地管理版本，可以把RN项目打包成AAR文件，让原生项目直接依赖。

步骤如下：

• 在ProjectReactNative/android目录下执行打包命令：

  cd android
  ./gradlew assembleRelease
  

  生成的AAR文件在app/build/outputs/aar/目录下。
• 把这个AAR文件复制到ProjectAndroid/app/libs目录，然后在app/build.gradle里添加依赖：

  dependencies {
      implementation files('libs/app-release.aar')
      // 同样要添加和RN项目版本一致的核心依赖
      implementation "com.facebook.react:react-native:0.72.0"
      implementation "com.facebook.react:hermes-android:0.72.0"
  }
  

• 后续唤起RN页面的逻辑和方案一完全一致，就不多赘述了。

几个要注意的坑 #

• 版本一致性：原生项目里的RN核心库版本必须和ProjectReactNative的版本完全匹配，不然会出现各种奇怪的崩溃。
• 资源冲突：如果RN项目和原生项目有同名的资源（比如图片、字符串），记得给RN的资源加前缀避免冲突。
• 调试模式：开发阶段可以开启RN的开发者菜单（比如摇一摇或者双击屏幕），方便调试RN页面的布局和逻辑。

备注：内容来源于stack exchange，提问作者user1372655