如何在已上线的Flutter项目中集成React Native SDK？

一、前置准备 #

• 确认Flutter项目的Android开发环境（JDK、NDK版本等）与目标React Native（RN）版本兼容（比如Flutter 3.10+适配RN 0.72+）
• 备份现有Flutter项目代码，避免集成过程中破坏原有功能

二、创建React Native桥接模块 #

1. 在Flutter项目根目录下新建rn-sdk-wrapper文件夹，进入该目录执行初始化命令：

   npx react-native init RNSDKWrapper --version 0.72.6
   

   选择与你的Flutter Android项目匹配的RN版本，避免依赖冲突

2. 在RN模块中集成目标SDK：

   • 安装SDK依赖：npm install your-target-rn-sdk --save
   • 按照SDK官方文档配置Android项目：比如修改android/app/src/main/AndroidManifest.xml添加权限、meta-data；调整android/build.gradle中的依赖版本或仓库配置

3. 封装SDK调用逻辑：

   • 若SDK为纯JS层实现，直接在RN的JS文件中封装调用函数：

     export const invokeSDK = (params) => {
       return yourTargetSDK.execute(params);
     };
     

   • 若SDK需要原生层交互，编写RN原生桥接模块（以Android为例）：
     创建继承ReactContextBaseJavaModule的类，实现SDK的调用方法；再创建ReactPackage子类注册该模块，最后在MainApplication.java中添加这个Package

三、Flutter与React Native的桥接实现 #

方式1：通过Method Channel调用RN的SDK方法 #

1. 在RN模块中设置Method Channel监听：

   import { NativeModules, NativeEventEmitter } from 'react-native';
   
   const { RNSDKBridge } = NativeModules;
   const eventEmitter = new NativeEventEmitter(RNSDKBridge);
   
   // 监听Flutter发起的SDK调用请求
   eventEmitter.addListener('callSDK', (params) => {
     invokeSDK(params).then(result => {
       // 将SDK执行结果返回给Flutter
       RNSDKBridge.sendResult(result);
     });
   });
   

2. 在Flutter项目中创建对应的Method Channel：

   import 'package:flutter/services.dart';
   
   class RNSDKConnector {
     static const MethodChannel _channel = MethodChannel('rn_sdk_bridge');
   
     static Future<dynamic> callSDK(Map<String, dynamic> params) async {
       final result = await _channel.invokeMethod('callSDK', params);
       return result;
     }
   }
   

3. 合并RN与Flutter的Android代码：

   • 将RN模块android/app/src/main/java/com/rnsdkwrapper/下的代码复制到Flutter项目对应包路径下，修改包名适配Flutter项目
   • 在Flutter的android/build.gradle中添加RN依赖仓库：

     allprojects {
       repositories {
         // 原有仓库
         maven { url "$rootDir/../rn-sdk-wrapper/node_modules/react-native/android" }
         maven { url "$rootDir/../rn-sdk-wrapper/node_modules/jsc-android/dist" }
       }
     }
     

   • 在Flutter的android/app/build.gradle中添加RN依赖：

     dependencies {
       // 原有依赖
       implementation project(':react-native')
       implementation fileTree(dir: "$rootDir/../rn-sdk-wrapper/node_modules/react-native/android/libs", include: ['*.jar'])
     }
     

方式2：嵌入RN页面作为Flutter Widget #

1. 将RN模块打包为AAR：
   进入RN模块的Android目录，执行：

   ./gradlew assembleRelease
   

   生成的AAR文件位于android/app/build/outputs/aar/路径下

2. 在Flutter项目中导入AAR：
   将AAR文件复制到Flutter项目的android/app/libs/目录，然后在android/app/build.gradle中添加依赖：

   dependencies {
     implementation files('libs/app-release.aar')
   }
   

3. 通过Platform View嵌入RN页面：

   import 'package:flutter/material.dart';
   import 'package:flutter/services.dart';
   
   class RNEmbeddedPage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return AndroidView(
         viewType: 'com.your-flutter-package/rn_page',
         creationParams: {'initParam': 'initialValue'},
         creationParamsCodec: StandardMessageCodec(),
       );
     }
   }
   

   同时在RN原生模块中注册对应的Platform View，确保Flutter可以正常加载

四、测试与发布 #

• 本地运行Flutter项目，验证SDK调用逻辑、页面嵌入是否正常
• 测试通过后，生成Android App Bundle（AAB），若SDK需要混淆规则，在proguard-rules.pro中添加对应配置，最后上传至Google Play

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