HarmonyOS6 底部导航栏组件 rc_concave_tabbar 使用指南

前言

rc_concave_tabbar 是一个功能强大的 HarmonyOS 底部导航栏组件库，提供凹陷圆形动画效果样式，适用于多种场景。本篇将介绍 rc_concave_tabbar 的使用方法以及其相关的设计理念。

组件特性

• 流畅动画：支持流畅的凹陷圆形切换动画效果
• 高度定制：支持自定义背景色、字体颜色、高度等多种样式配置
• 灵活配置：支持全局配置和单项配置，满足不同场景需求
• 简单易用：API 设计简洁，快速集成到 HarmonyOS 项目中
• 性能优化：动画流畅，性能表现优异

适用场景

• 电商类应用底部导航
• 社交类应用主页面切换
• 内容资讯类应用导航栏
• 工具类应用多功能入口
• 需要精美底部导航动效的各类应用

使用说明

安装组件

rc_concave_tabbar 已发布到 OpenHarmony 三方库中心仓库中，访问地址为：https://ohpm.openharmony.cn/#/cn/detail/rc_concave_tabbar

安装步骤

1. 添加依赖

在项目根目录下执行以下命令：

ohpm install rc_concave_tabbar

（此处为安装依赖截图）

2. 基本使用

步骤一：引入相关依赖

在需要使用组件的页面文件中，导入必要的类型和组件：

import { TabMenusInterfaceIRequired, TabsConcaveCircle } from 'rc_concave_tabbar'

步骤二：创建菜单数据

定义状态变量和菜单配置数据：

// 当前选择的菜单
@State currentIndex: number = 0;
// 菜单数据
@State TabsMenu: TabMenusInterfaceIRequired[] = [
  { text: "首页", image: $r("app.media.index1"), selectImage: $r("app.media.index") },
  { text: "分类", image: $r(), selectImage: $() },
  { : , image: $(), selectImage: $() },
  { : , image: $(), selectImage: $() }
];