基于Expo裸工作流的React Native移动应用中使用Re.Pack实现微前端

阿华AIGC实验室

2026-4-8

我确实帮不少开发者处理过类似的场景，明确告诉你：Expo裸工作流 + Re.Pack实现微前端是完全可行的，而且已经有不少团队落地了这个方案，不用太担心技术可行性的问题。

下面我给你梳理下核心的集成思路和需要注意的细节：

核心适配逻辑

Expo裸工作流本质上已经是“半原生”的RN工程——它保留了Expo的工具链，但已经可以直接修改iOS/Android原生代码，这和纯RN原生工程的差异很小，所以Re.Pack的集成逻辑和纯RN项目基本对齐，只需要针对Expo的特有配置做少量调整。

关键集成步骤

版本前置检查：先把你的Expo裸工作流升级到支持React Native 0.70+的版本，Re.Pack对较新的RN版本兼容性更完善，能避免很多旧版本的适配坑。

安装Re.Pack依赖：在项目根目录执行对应的包管理命令：

# yarn
yarn add @callstack/repack
# npm
npm install @callstack/repack --save

原生工程配置调整：
- Android端：修改android/app/build.gradle，将原有的Metro打包任务替换为Re.Pack的打包任务，同时配置JS Bundle的加载路径，确保微前端模块能被正确寻址。
- iOS端：调整ios/Podfile的依赖配置，修改AppDelegate.mm中的JS Bundle加载逻辑，引入Re.Pack的模块加载器，替代默认的Metro加载逻辑。

微前端模块联邦配置：
用Re.Pack内置的ModuleFederationPlugin来定义宿主应用和远程微应用的关系，比如宿主应用的webpack.config.js配置示例：

const { ModuleFederationPlugin } = require('@callstack/repack/webpack');

module.exports = {
  // 其他Re.Pack配置...
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      // 配置远程微应用的入口
      remotes: {
        userMicroApp: 'userMicroApp@http://your-micro-app-server/remoteEntry.js',
      },
      // 共享核心依赖，确保单实例避免冲突
      shared: {
        react: { singleton: true, eager: true },
        'react-native': { singleton: true, eager: true },
      },
    }),
  ],
};

远程微应用则需要在自己的webpack.config.js中配置exposes字段，把需要被宿主加载的组件/模块暴露出来。

避坑指南

Expo Updates兼容性：如果你用到了Expo的expo-updates功能，需要自定义更新逻辑，确保Re.Pack打包的Bundle能被expo-updates正确识别和更新，避免出现更新不生效的问题。
共享依赖的单实例控制：react、react-native这类核心依赖必须配置为单实例（singleton: true），否则会出现组件上下文冲突、钩子函数报错等问题。
真机调试的网络配置：真机调试时，要确保宿主应用能访问到远程微应用的Bundle服务，注意配置设备的网络权限，以及将本地服务地址替换为可被真机访问的IP地址。

这个方案的优势很明显：既能保留Expo裸工作流带来的便捷性（比如快速集成Expo官方原生模块），又能通过Re.Pack实现微前端的模块拆分、独立开发和部署，非常适合大型RN应用的模块化演进。

内容来源于stack exchange