1. 理解 Metro Bundler：

在 React Native 开发中，Metro 是一个 JavaScript bundler。它的主要作用是将项目中的所有 JavaScript 代码、资源文件（如图片、字体等）打包成一个或多个 bundle，供移动应用加载和执行。 Metro 充当本地开发服务器，监听文件更改，并实时更新 bundle，从而实现快速的开发迭代。

Metro 本身是一个运行中的进程，而不是一个静态文件。通常，你不需要直接操作 Metro 的配置文件。Metro 会自动查找项目根目录下的 metro.config.js 文件（如果存在）来加载配置。如果没有找到该文件，Metro 将使用默认配置。

2. 执行命令生成bundle 文件：

在 HarmonyRNShop 目录下运行生成 bundle 文件的命令。运行成功后，会在 HarmonyRNShop/harmony/entry/src/main/resources/rawfile 目录下生成 bundle.harmony.js 和 assets 文件夹，assets 用来存放图片（如果 bundle 中不涉及本地图片，则没有 assets 文件夹）。

npm run dev

如果运行时报错 “'react-native'不是内部或外部命令，也不是可运行的程序或批处理文件。”，请重新运行 npm install 命令。

在鸿蒙集成RN 生成bundle 时：error: unknown command ‘bundle-harmony’，原因是"@react-native-oh/react-native-harmony": "0.72.53"包下面间接依赖使用了 memfs@^{4.12.0，而这个}符号会导致直接下载最新的4.36.0 版本，而这个版本中缺少 ‘memfs/lib/Dirent’ 依赖，最终导致找不到 bundle-harmony 命令。

npm install memfs@4.17.2

安装后，重新运行 npm run dev 命令，生成 bundle 文件成功。

可以在 HarmonyRNShop/harmony/entry/src/main/resources/rawfile 目录下看到生成的 bundle.harmony.js 和 assets 文件夹。

3. 也可以使用 Metro 服务来加载 bundle 包：

Metro服务加载bundle包主要有三种方式，分别适用于不同场景：

• 本地资源加载（rawfile）

将打包好的bundle文件（如bundle.harmony.js或Hermes字节码hermes_bundle.hbc）放入项目的entry/src/main/resources/rawfile/目录下。这种方式适合线上发布或无需热更新的场景，性能稳定可靠。

• Metro服务加载（开发调试）

在开发阶段使用Metro开发服务器实现热重载功能。这种方式支持实时代码修改和快速刷新，极大提升开发效率。

• 沙箱目录加载（文件系统）

从设备文件系统的沙箱目录中加载bundle文件，适合需要动态更新或分场景加载的应用。

Metro打包流程详解，Metro的打包过程分为三个独立阶段：

‌- 解析阶段‌：扫描所有模块并构建依赖关系图
‌- 转换阶段‌：将模块转换为目标平台可识别的格式
‌- 序列化阶段‌：将所有模块打包成一个或多个bundle文件

拆包技术优化，对于大型应用，可以采用拆包技术将bundle分为基础包和多个业务包。基础包包含React Native框架和公共依赖，业务包按需加载，这样可以：

• 减少初始加载时间
• 降低内存占用
• 支持热更新和热修复

‌建议‌：在开发阶段使用Metro服务加载方式，享受热重载带来的便捷；发布时切换到本地资源加载，确保应用稳定运行。你可以通过配置不同的加载策略来平衡开发效率和发布性能。

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。