如何在React Native核心应用内集成多RN应用（无需跳转与深度链接）

要实现核心主应用内加载多个RN子应用、无需跳转也不用深度链接的需求，核心是动态加载子应用的JS Bundle并在主应用容器内渲染其组件，以下是具体实现方案：

核心思路 #

RN应用的运行依赖JS Bundle和原生桥接，主应用可以通过原生层动态加载子应用的Bundle，再在JS层导入子应用的根组件，直接嵌入主应用的视图层级中，全程无需脱离主应用上下文。

具体实现步骤 #

1. 子应用独立打包 #

每个子应用单独打包生成专属的JS Bundle和资源文件，确保主应用能访问到这些文件：

• iOS打包命令：

  react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ./ios/bundles/subApp1.bundle --assets-dest ./ios/bundles
  

• Android打包命令：

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

打包完成后，将Bundle和资源文件放入主应用对应的资源目录（iOS的Copy Bundle Resources、Android的assets/res）。

2. 主应用动态加载子应用Bundle #

通过原生模块实现Bundle加载能力，再在JS层调用该模块加载子应用Bundle，随后导入子应用组件：

JS层容器组件示例

import React, { useEffect, useState } from 'react';
import { View, Text, NativeModules } from 'react-native';

const { BundleLoader } = NativeModules;

// 子应用容器组件，接收子应用名称作为参数
const SubAppContainer = ({ appName }) => {
  const [subAppView, setSubAppView] = useState(null);

  useEffect(() => {
    // 加载指定子应用的Bundle
    BundleLoader.loadBundle(`bundles/${appName}.bundle`)
      .then(() => {
        // 动态导入子应用根组件
        const SubAppRoot = require(`../subApps/${appName}/index`).default;
        // 渲染子应用，可通过props传递主应用的回调方法实现通信
        setSubAppView(
          <SubAppRoot 
            onSubAppEvent={(data) => handleSubAppEvent(data)} 
          />
        );
      })
      .catch(err => console.error(`加载${appName}失败:`, err));
  }, [appName]);

  // 处理子应用发送的事件
  const handleSubAppEvent = (data) => {
    console.log('主应用收到子应用数据:', data);
    // 这里可以触发主应用的业务逻辑
  };

  return (
    <View style={{ flex: 1 }}>
      {subAppView || <Text>加载中...</Text>}
    </View>
  );
};

export default SubAppContainer;

iOS原生模块实现（Objective-C）

// BundleLoader.h
#import <React/RCTBridgeModule.h>

@interface BundleLoader : NSObject <RCTBridgeModule>
@end

// BundleLoader.m
#import "BundleLoader.h"
#import <React/RCTBridge.h>

@implementation BundleLoader

RCT_EXPORT_MODULE();

// 暴露加载Bundle的方法给JS层
RCT_EXPORT_METHOD(loadBundle:(NSString *)bundlePath 
                  resolver:(RCTPromiseResolveBlock)resolve 
                  rejecter:(RCTPromiseRejectBlock)reject) {
  NSURL *bundleURL = [[NSBundle mainBundle] URLForResource:bundlePath withExtension:nil];
  if (!bundleURL) {
    reject(@"BUNDLE_NOT_FOUND", @"子应用Bundle文件不存在", nil);
    return;
  }
  
  // 将子应用Bundle加载到当前RN桥接上下文
  [self.bridge loadAndExecuteScriptURL:bundleURL];
  resolve(@"Bundle加载成功");
}

@end

Android原生模块实现（Java）

// BundleLoaderModule.java
package com.yourmainapp;

import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import java.io.File;

public class BundleLoaderModule extends ReactContextBaseJavaModule {
    public BundleLoaderModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "BundleLoader";
    }

    @ReactMethod
    public void loadBundle(String bundlePath, Promise promise) {
        try {
            // 获取Bundle文件路径
            File bundleFile = new File(getReactApplicationContext().getAssets().openFd(bundlePath).getFileDescriptor());
            if (!bundleFile.exists()) {
                promise.reject("BUNDLE_NOT_FOUND", "子应用Bundle文件不存在");
                return;
            }
            
            // 加载Bundle到当前RN Catalyst实例
            getReactApplicationContext().getCatalystInstance()
                .loadScriptFromFile(bundleFile.getAbsolutePath(), null, false);
            promise.resolve("Bundle加载成功");
        } catch (Exception e) {
            promise.reject("LOAD_ERROR", e.getMessage());
        }
    }
}

3. 主/子应用通信 #

因为主、子应用共享同一个RN桥接上下文，无需深度链接，可通过两种方式通信：

• Props回调：主应用在渲染子应用组件时，通过props传递回调方法，子应用调用该方法传递数据。
• 全局事件总线：利用RN内置的EventEmitter实现事件订阅与发送：

  // 主应用订阅事件
  import { NativeEventEmitter, NativeModules } from 'react-native';
  const eventEmitter = new NativeEventEmitter(NativeModules.BundleLoader);
  eventEmitter.addListener('SubAppEvent', (data) => console.log(data));
  
  // 子应用发送事件
  eventEmitter.emit('SubAppEvent', { msg: '来自子应用的消息' });
  

关键注意事项 #

• Metro配置：主应用的metro.config.js需要添加子应用路径到watchFolders，确保Metro能监听子应用代码变化：

  const path = require('path');
  module.exports = {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    watchFolders: [
      path.resolve(__dirname, '../subApps/subApp1'),
      path.resolve(__dirname, '../subApps/subApp2'),
    ],
  };
  

• 版本兼容性：所有子应用的React Native版本必须与主应用完全一致，避免API不兼容导致崩溃。
• 状态隔离：子应用需使用独立的状态管理实例（如Redux Store），避免全局状态污染。
• 资源共享：子应用的公共资源（如字体、图标）可统一放入主应用资源目录，避免重复打包。

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