在当前移动应用开发过程中，跨平台技术已经成为提升开发效率、降低多端维护成本的重要手段。随着技术的不断演进，业界涌现了多个优秀的跨平台框架，其中 React Native 和 Flutter 是最具代表性的两种方案。
React Native 是由 Facebook 推出的跨平台框架，凭借其“学一次，处处运行”的理念以及对原生组件的良好支持，成为较早投入生产环境并广泛应用的解决方案。它的优势在于可以在保持部分原生项目结构的同时，通过 JavaScript 快速构建业务模块，特别适用于已有原生项目希望逐步引入跨平台能力的场景。
相比之下，Flutter 则是 Google 主导的新一代跨平台 UI 框架，以其自绘 UI、高性能渲染引擎和丰富的组件生态迅速获得开发者青睐。Flutter 更适合从零开始构建全新项目，或对 UI 表现要求极高的应用。但在混合开发场景下，其与原生的集成成本相对更高。
本文将聚焦于 React Native 的混合开发能力，分享如何在一个已有的 iOS 原生项目中嵌入 React Native 模块，并通过集成热更新机制实现业务代码的快速迭代与发布。希望为希望逐步实现跨平台演进的开发团队提供可参考的实践路径和技术思路。
1、由于项目历史原因本地环境比较旧，没有使用React-Native的最新版本
实际使用版本：
node v12.16.1、react-native 0.62.3、xcode 15.2、pod 1.12.0
2、创建React-Native模块，在项目根目录执行以下命令
npx react-native init RNModule --version 0.62.3
等待执行完成，目录结构应该是这样
3、podfile文件里需要配置reac-native相关库，这个可以参考react-native官方配置不同的版本配置不一样，这里都可以查询到。
4、在项目根目录执行以下命令
pod install
5、如果是新创建的项目需要删除SceneDelegate，还是使用默认的AppDelegate
6、在ViewController实现如下代码
7、修改React-Native模块
8、运行react-native代码，运行原生App
npx react-native start
9、最终效果，到这一步iOS原生和React-Native混合开发就调通了，可以进入正常的业务开发中
10、React Native bundle 打离线包，这是实现热更新的关键
mkdir -p /Users/yunxiao/Desktop/outputios && react-native bundle --entry-file ./index.js --platform ios --dev false --bundle-output /Users/yunxiao/Desktop/outputios/main.jsbundle --assets-dest /Users/yunxiao/Desktop/outputios
11、bundle包导入项目查看是否可用，也可以作为备用文件，防止热更文件出问题时该模块无法使用
直接访问本地bundle包路径
12、模块热更新实现就很简单了，只要把该文件上传到云端之后，每次打开App通过接口检查是否有更新，没有更新直接忽略，有更新就启动更新包异步下载，下载完成后，下一次打开该模块时会校验本地目录是否完整且版本号是否和云端返回最新的版本号一致，校验完成后直接加载本地文件路径[NSURL fileURLWithPath:bundlePath]，热更新流程完成。
总结
本文详细介绍了如何在已有 iOS 项目中集成 React Native 模块，并实现基于本地 bundle 包的热更新机制。通过将 React Native 离线包与原生代码结合，既保留了原生项目的性能与结构优势，又提升了业务模块的跨端复用能力与迭代效率。
适用于：
- 有大量历史原生代码的项目；
- 想逐步引入 RN 提升开发效率的场景；
- 希望通过热更新提升发版灵活性的产品线。
后续可进一步结合 OTA 平台（如 CodePush、热更服务中台等）提升热更流程的自动化和稳定性。
