在Repack项目中解决React Native Gesture Handler的共享依赖问题

问题背景

在使用Repack构建React Native应用时，开发者可能会遇到一个常见问题：当宿主应用(Host App)和微应用(Mini App)同时使用react-native-gesture-handler库时，会出现模块加载冲突。这个问题源于Repack的Module Federation特性和原生模块的特殊性。

问题本质分析

react-native-gesture-handler是一个包含原生模块的React Native库。在Repack的Module Federation架构中，所有包含原生模块的包都必须由宿主应用提供。这是因为：

1. 原生模块需要在应用启动时初始化
2. 多个实例会导致原生代码冲突
3. 微应用不应该直接包含原生模块

解决方案

要正确配置react-native-gesture-handler在Repack项目中的使用，需要在宿主应用和微应用的webpack配置中进行特殊设置。

宿主应用配置

在宿主应用的webpack.config.js中，需要将react-native-gesture-handler声明为共享依赖，并设置为单例模式且急切加载：

new Repack.plugins.ModuleFederationPlugin({
  name: 'host_app',
  shared: {
    "react-native-gesture-handler": {
      singleton: true,  // 确保只有一个实例
      eager: true       // 在应用启动时立即加载
    }
  },
}),

微应用配置

在微应用的webpack.config.js中，同样需要声明共享依赖，但设置eager为false：

new Repack.plugins.ModuleFederationPlugin({
  name: 'mini_app',
  shared: {
    "react-native-gesture-handler": {
      singleton: true,  // 确保使用宿主提供的实例
      eager: false      // 不立即加载
    }
  },
}),

配置原理

这种配置方式确保了：

1. 单例模式：整个应用中只有一个react-native-gesture-handler实例运行
2. 加载控制：由宿主应用负责初始化和加载原生模块
3. 依赖共享：微应用复用宿主提供的库实例，避免重复加载和冲突

最佳实践建议

1. 对于所有包含原生模块的React Native库，都应采用类似的共享配置
2. 在开发过程中，注意检查控制台警告，及时发现共享依赖问题
3. 定期检查依赖版本，确保宿主和微应用使用的库版本兼容
4. 考虑创建一个共享依赖的配置文件，统一管理所有需要特殊处理的依赖项

总结

在Repack项目中使用react-native-gesture-handler这类包含原生模块的库时，正确的Module Federation配置是关键。通过合理的共享依赖设置，可以避免模块冲突，确保应用稳定运行。这种解决方案不仅适用于react-native-gesture-handler，也适用于其他类似的包含原生代码的React Native库。