Teaset框架中的SegmentedView分段器组件详解

最新推荐文章于 2025-06-19 09:14:18 发布

薛靓璐Gifford

最新推荐文章于 2025-06-19 09:14:18 发布

阅读量235

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01081/article/details/148756210

Teaset框架中的SegmentedView分段器组件详解

teaset A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control. 项目地址: https://gitcode.com/gh_mirrors/te/teaset

组件概述

SegmentedView是Teaset框架中一个功能强大的分段器组件，主要用于在同一页面中实现多项内容的分段显示。该组件实际上是SegmentedBar、Projector和Carousel三个组件的复合封装，提供了更简洁易用的API接口。

核心功能

SegmentedView主要解决了以下场景需求：

需要在一个页面中展示多个内容区块
需要通过顶部或底部的标签栏进行内容切换
需要支持流畅的切换动画效果
需要适应不同数量的分段项

组件结构

SegmentedView由两部分组成：

分段工具条(SegmentedBar)：位于顶部或底部的标签栏，用于显示和选择各个分段
内容展示区：根据类型不同，可以是Projector(幻灯机)或Carousel(走马灯)组件

主要属性详解

基础配置

type：指定内容展示区的类型
- 'projector'：幻灯机模式，适合少量内容页
- 'carousel'：走马灯模式，适合较多内容页且需要流畅滑动
barPosition：工具条位置
- 'top'：顶部（默认）
- 'bottom'：底部

工具条样式控制

barStyle：自定义工具条样式
justifyItem：分段项排列方式
- 'fixed'：固定宽度等分排列（默认）
- 'scrollable'：可滚动排列，适合较多分段项

指示器配置

indicatorType：激活指示器类型
- 'none'：不显示
- 'boxWidth'：等分区间宽度
- 'itemWidth'：跟随内容宽度（默认）
indicatorPosition：指示器位置
- 'top'：上方
- 'bottom'：下方（默认）

交互控制

animated：是否启用切换动画（默认true）
autoScroll：是否自动滚动到可视区域（仅scrollable模式有效）
activeIndex：当前激活的分段索引

SegmentedView.Sheet子组件

每个分段内容通过SegmentedView.Sheet子组件定义，主要属性包括：

title：分段标题，支持字符串、数字或自定义组件
titleStyle：标题样式
activeTitleStyle：激活状态标题样式
badge：徽章标记，支持字符串、数字或自定义组件

使用示例

<SegmentedView style={{flex: 1}} type='projector'>
  <SegmentedView.Sheet title='消息' badge={5}>
    <View style={styles.content}>
      <Text>消息内容区</Text>
    </View>
  </SegmentedView.Sheet>
  <SegmentedView.Sheet title='联系人'>
    <View style={styles.content}>
      <Text>联系人列表</Text>
    </View>
  </SegmentedView.Sheet>
  <SegmentedView.Sheet title='动态'>
    <View style={styles.content}>
      <Text>好友动态</Text>
    </View>
  </SegmentedView.Sheet>
</SegmentedView>