前言
rc_concave_tabbar 是一个专为 HarmonyOS 设计的底部导航栏组件库，主打凹陷圆形动画效果。它不仅能提升应用的视觉质感，还能通过灵活的配置满足不同业务场景的需求。下面我们来聊聊它的核心特性、安装方式以及实战中的注意事项。
组件特性
- 流畅动画：切换时带有平滑的凹陷圆形过渡效果
- 高度定制：背景色、字体颜色、高度等样式均可调整
- 灵活配置：支持全局统一设置，也支持单项独立配置
- 简单易用：API 设计直观，集成成本低
- 性能优化：动画渲染效率高，不占用过多系统资源
适用场景
适合电商应用、社交软件主页面、内容资讯类 APP 以及工具类应用的多功能入口导航。
使用说明
安装组件
该组件已发布到 OpenHarmony 三方库中心仓库。在项目根目录下执行以下命令即可安装：
ohpm install rc_concave_tabbar
步骤一：引入相关依赖
在需要使用组件的页面文件中，导入必要的类型和组件：
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("app.media.classify1"),
selectImage: $r("app.media.classify")
},
{
text: "发现",
: $r(),
: $r()
},
{
: ,
: $r(),
: $r()
}
]
