MutilBundle加载方案实现路由跳转功能效果图如下，这里的方案还是有点小复杂，我来带大家一起来学习一下。

这段代码是一个基于‌OpenHarmony ArkUI‌框架开发的应用首页，主要功能是提供两个页面的导航入口。

代码核心功能

这是一个多页面应用的入口页面，包含两个主要部分：

#‌# 页面初始化‌

• 在页面显示前预加载两个React Native模块：Hotel（酒店）和Flight（机票）
• 两个模块都使用同一个Harmony bundle文件：basic.harmony.bundle
  ‌

界面布局‌

• 垂直排列两个按钮：“前往酒店页面"和"前往机票页面”
• 点击按钮后通过router.pushUrl方法跳转到对应的目标页面
• 页面采用居中布局，占据整个屏幕空间

技术特点

• 使用‌声明式UI‌开发范式
• 采用‌组件化‌架构，@Entry标识入口组件，@Component标识自定义组件
• 集成React Native能力，支持混合开发模式

‌建议‌：如果你需要添加更多页面，可以按照相同模式在aboutToAppear方法中添加prepareRN调用，并在build方法中创建新的按钮。

---

ResourceJSBundleProvider 是 React Native for OpenHarmony (RNOH) 中的一个关键类，主要用于在鸿蒙原生应用中加载和管理 React Native 的 JavaScript Bundle 资源。

主要功能

资源加载管理‌：负责从鸿蒙应用的资源管理器中读取和提供 JS Bundle 文件。它通过 getContext().resourceManager 获取应用资源，然后加载指定路径的 Bundle 文件，如 ‘bundle/basic/basic.harmony.bundle’。

Bundle 提供器‌：作为 JS Bundle 的提供者，将鸿蒙平台的资源文件适配给 React Native 运行时使用。

使用场景

在混合开发架构中，ResourceJSBundleProvider 通常与 RNInstanceManager 配合使用，在应用启动时预加载不同的 React Native 业务模块。

典型用法示例

// 预加载酒店模块
RNInstanceManager.prepareRN('Hotel', new ResourceJSBundleProvider(
  getContext().resourceManager, 'bundle/basic/basic.harmony.bundle'
));

// 预加载机票模块  
RNInstanceManager.prepareRN('Flight', new ResourceJSBundleProvider(
  getContext().resourceManager, 'bundle/basic/basic.harmony.bundle'
));

这种设计允许在鸿蒙原生应用中集成多个 React Native 模块，每个模块可以共享或使用不同的 JS Bundle 文件。

建议‌：在你的鸿蒙项目中，可以通过创建多个 ResourceJSBundleProvider 实例来分别管理不同业务功能的 JS Bundle，实现更好的模块化管理和资源控制。

import router from '@ohos.router';
import { ResourceJSBundleProvider, } from '@rnoh/react-native-openharmony';
import { RNInstanceManager } from "../rn/RNInstanceManager";

@Entry
@Component
struct Index {
  aboutToAppear() {
    RNInstanceManager.prepareRN('Hotel', new ResourceJSBundleProvider(
      getContext().resourceManager, 'bundle/basic/basic.harmony.bundle'))
    RNInstanceManager.prepareRN('Flight', new ResourceJSBundleProvider(
      getContext().resourceManager, 'bundle/basic/basic.harmony.bundle'))
  }

  build() {
    Column() {
      Button("前往酒店页面")
        .margin({
          bottom: 50
        })
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Hotel'
          })
        })

      Button("前往机票页面")
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Flight'
          })
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
  }
}

这是一个典型的OpenHarmony ArkTS应用入口文件，采用‌声明式UI‌开发范式。代码通过@Entry装饰器标识为应用入口组件，@Component装饰器定义自定义组件结构。整个应用采用混合开发模式，在原生ArkUI框架中集成了React Native组件能力。

核心组件结构解析

1. 装饰器机制

‌@Entry‌：标识该组件为应用入口，系统在启动时会首先加载和渲染这个组件
‌@Component‌：定义自定义组件，将数据结构与UI描述进行绑定

2. 组件生命周期

aboutToAppear()是ArkUI组件的生命周期函数，在组件即将出现时调用。这里用于‌预加载React Native实例‌，确保在用户跳转前相关模块已准备就绪。

3. UI布局系统

代码采用Column垂直布局容器，内部包含两个Button组件：

‌Column‌：垂直方向排列子组件，主轴为纵向
‌justifyContent(FlexAlign.Center)‌：在主轴上居中对齐子元素
‌alignItems(HorizontalAlign.Center)‌：在交叉轴上居中对齐

关键技术实现详解

1. React Native混合集成

RNInstanceManager.prepareRN('Hotel', new ResourceJSBundleProvider(
  getContext().resourceManager, 'bundle/basic/basic.harmony.bundle'))
‌RNInstanceManager‌：React Native实例管理器，负责创建和管理RN运行环境。prepareRN方法接收两个参数：

实例标识符（‘Hotel’、‘Flight’）

JS Bundle提供器，从资源管理器中加载打包好的Harmony bundle文件
这种设计实现了‌原生性能与跨平台开发的平衡‌，既可以利用ArkUI的高性能渲染，又能复用React Native丰富的生态组件
。

2. 路由导航机制

router.pushUrl({
  url: 'pages/Hotel'
})

@ohos.router‌模块提供页面路由能力：

pushUrl()：推入新页面到路由栈
支持参数传递和页面间通信
提供前进、后退等导航控制

3. 资源管理策略

getContext().resourceManager获取应用资源管理器，'bundle/basic/basic.harmony.bundle’指定JS Bundle资源路径。值得注意的是，酒店和机票页面‌共享同一个bundle文件‌，这表明：

代码复用程度高
资源包体积优化
动态加载不同业务模块
布局属性深度分析

---

接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle，这样可以进行在开源鸿蒙OpenHarmony中进行使用。

最终实现效果是：

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