引言

在跨平台开发中，技术栈的选择与设计原则直接影响应用的性能和用户体验。通过原生集成 ArkUI 页面，结合状态保留与轻量依赖的设计，能够有效降低跨栈切换的复杂度，确保交互流畅性。以下方案基于 ArkUI + ArkTS 实现，采用 Stack + visibility 控制页面显隐，保留滚动位置与输入状态，同时通过视觉分层与稳定互斥的交互逻辑，提升整体体验。

技术栈与设计原则

技术栈
ArkUI + ArkTS（原生），在 React Native for OpenHarmony 项目中直接集成 ArkUI 页面，避免跨栈切换带来的复杂性。

设计原则

• 保留状态：使用 Stack + visibility 控制显示/隐藏，不销毁页面实例，从而保留滚动位置与输入状态。
• 视觉分层：底部选中态采用颜色高亮与文字加粗；页面标题统一采用左侧高亮竖线分隔构建器，提升层次。
• 稳定互斥：所有交互仅更新 currentTab 状态，不做复杂路由切换，确保切换无白屏与闪动。
• 轻量依赖：纯 ArkUI 实现，不依赖第三方 TabBar 组件，避免版本适配问题。

---

关键实现概览

Tab 枚举与状态定义

interface ListItemModel {
  id: number;
  title: string;
  body: string;
}

interface UserModel {
  id: number;
  name: string;
  email: string;
}

interface MessageModel {
  id: number;
  name: string;
  body: string;
}

enum TabId {
  Home = 0,
  Hot = 1,
  Profile = 2,
  Settings = 3
}

页面容器（保态）

使用 Stack 包含四个页面，每个页面通过 .visibility 切换显示。

@State currentTab: TabId = TabId.Home;

@Builder sectionHeader(title: string) {
  Row() {
    Text('┃').fontSize(20).fontColor('#0A84FF').margin({ left: 12, right: 8 })
    Text(title).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#222222')
  }.padding({ top: 12, bottom: 12, right: 12 })
}

@Builder subHeader(title: string) {
  Row() {
    Text('┃').fontSize(16).fontColor('#0A84FF').margin({ left: 12, right: 8 })
    Text(title).fontSize(16).fontWeight(FontWeight.Medium).fontColor('#333333')
  }.padding({ top: 10, bottom: 10, right: 12 })
}

// 保态页面容器（四页 Stack）
Stack() {
  // 首页
  Column() {
    this.sectionHeader('开源鸿蒙网络清单列表示例')
    // 这里是首页内容（如列表、刷新、加载更多）
  }
  .visibility(this.currentTab === TabId.Home ? Visibility.Visible : Visibility.Hidden)
  .width('100%').height('100%')

  // 热门
  Column() {
    this.sectionHeader('热门项目列表')
    // 搜索输入框、热门列表占位或真实数据展示
  }
  .visibility(this.currentTab === TabId.Hot ? Visibility.Visible : Visibility.Hidden)
  .width('100%').height('100%')

  // 我的中心
  Column() {
    this.sectionHeader('我的中心')
    // 用户信息展示、进入详情/返回
  }
  .visibility(this.currentTab === TabId.Profile ? Visibility.Visible : Visibility.Hidden)
  .width('100%').height('100%')

  // 设置/消息
  Column() {
    this.sectionHeader('设置/消息')
    // 推送开关、深色模式开关、消息列表占位
  }
  .visibility(this.currentTab === TabId.Settings ? Visibility.Visible : Visibility.Hidden)
  .width('100%').height('100%')
}.layoutWeight(1)

底部选项卡（TabBar）

Row() {
  // 首页
  Column() {
    Text('🏠').fontSize(20).fontColor(this.currentTab === TabId.Home ? '#0A84FF' : '#666666')
    Text('首页').fontSize(12).fontColor(this.currentTab === TabId.Home ? '#0A84FF' : '#666666')
      .fontWeight(this.currentTab === TabId.Home ? FontWeight.Bold : FontWeight.Normal)
  }
  .width('25%').height(56).justifyContent(FlexAlign.Center)
  .onClick(() => { this.currentTab = TabId.Home })

  // 热门
  Column() {
    Text('🔥').fontSize(20).fontColor(this.currentTab === TabId.Hot ? '#0A84FF' : '#666666')
    Text('热门').fontSize(12).fontColor(this.currentTab === TabId.Hot ? '#0A84FF' : '#666666')
      .fontWeight(this.currentTab === TabId.Hot ? FontWeight.Bold : FontWeight.Normal)
  }
  .width('25%').height(56).justifyContent(FlexAlign.Center)
  .onClick(() => { this.currentTab = TabId.Hot })

  // 我的
  Column() {
    Text('👤').fontSize(20).fontColor(this.currentTab === TabId.Profile ? '#0A84FF' : '#666666')
    Text('我的').fontSize(12).fontColor(this.currentTab === TabId.Profile ? '#0A84FF' : '#666666')
      .fontWeight(this.currentTab === TabId.Profile ? FontWeight.Bold : FontWeight.Normal)
  }
  .width('25%').height(56).justifyContent(FlexAlign.Center)
  .onClick(() => { this.currentTab = TabId.Profile })

  // 设置
  Column() {
    Text('⚙️').fontSize(20).fontColor(this.currentTab === TabId.Settings ? '#0A84FF' : '#666666')
    Text('设置').fontSize(12).fontColor(this.currentTab === TabId.Settings ? '#0A84FF' : '#666666')
      .fontWeight(this.currentTab === TabId.Settings ? FontWeight.Bold : FontWeight.Normal)
  }
  .width('25%').height(56).justifyContent(FlexAlign.Center)
  .onClick(() => { this.currentTab = TabId.Settings })
}
.width('100%').backgroundColor('#FFFFFF').border({ width: 0.5, color: '#EEEEEE' }).padding({ top: 6 })

页面展示：

---

交互与状态保留说明

• 切换保留：Stack + visibility 方案不会销毁页面实例，列表滚动、输入框内容、开关状态均会保留。
• 平滑切换：只更新 currentTab，一个渲染树中切换显示层，ArkUI 渲染开销很小。
• 视觉区分：选中态统一使用 #0A84FF 高亮与文字加粗，使用户清晰知晓当前页。

---

常见问题与修复建议

• 选项卡点击无响应

检查 onClick 是否在 Column 上，以及 currentTab 状态是否是 @State。

• 切换后状态丢失

确认采用 visibility 方案而非重新创建组件；严禁在切换时重建页面节点。

• 标题分隔构建器报错

仅使用合法 UI 组件（如 Text）绘制竖条，不使用未定义组件名称；已采用 Text('┃') 实现，语法合法。

• 视觉不统一

图标（emoji）与文字颜色统一切换；如需正式图标资源，可替换为 SVG/PNG 并统一色值。

结语

该方案通过纯 ArkUI 实现多页保态切换，避免了第三方依赖的适配问题，适合需要高性能与稳定性的场景。核心思路包括状态管理、视觉一致性优化以及轻量化实现，为开源鸿蒙生态的跨平台开发提供了可复用的实践参考。欢迎开发者进一步探索社区资源，共同完善跨平台技术生态。

最后也希望这篇文章能对正在尝试鸿蒙跨平台开发的同学有所帮助，也欢迎大家在评论区交流踩坑经验。

技术栈 ：React Native + TypeScript + axios + 开源鸿蒙

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net