react-native-collapsible-header-tab-view

不依赖 react-native-reanimated，可吸顶的 tab view 组件

特性

✨ 轻量级 - 不依赖 react-native-reanimated
🎯 高性能 - 优化的滚动性能
📱 吸顶效果 - 完整的粘性头部和标签栏支持
🔄 灵活 - 支持 FlatList、SectionList 和 ScrollView
⚡ TypeScript - 完整的类型支持

安装

npm install react-native-collapsible-header-tab-view
# or
yarn add react-native-collapsible-header-tab-view

依赖

本库依赖 react-native-pager-view, 确保您项目安装正确版本的pagerView

npm install react-native-pager-view

使用

基础示例

TabFlatList、TabSectionList、TabScrollView 可以在同一个 CollapsibleTabView 中混合使用，每个子组件对应一个 Tab 页。

import CollapsibleTabView, {
  TabFlatList,
  TabSectionList,
} from 'react-native-collapsible-header-tab-view';

const sections = [
  { title: 'A', data: ['Alice', 'Amy'] },
  { title: 'B', data: ['Bob', 'Ben'] },
];

export function App() {
  return (
    <CollapsibleTabView
      renderHeader={() => <HeaderComponent />}
      renderTabBar={(props) => <TabBarComponent {...props} />}
    >
      {/* Tab 1: FlatList */}
      <TabFlatList
        data={data}
        renderItem={({ item }) => <ItemComponent item={item} />}
        keyExtractor={(item) => item.id}
      />
      {/* Tab 2: SectionList */}
      <TabSectionList
        sections={sections}
        renderItem={({ item }) => <Text>{item}</Text>}
        renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
        keyExtractor={(item, index) => item + index}
      />
    </CollapsibleTabView>
  );
}

Props

CollapsibleTabView

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | renderHeader | () => ReactNode | 必需 | 头部组件 | | renderTabBar | (props: TabBarProps) => ReactNode | 必需 | 标签栏组件 | | estimatedHeaderHeight | number | 0 | 预估头部高度 | | estimatedTabBarHeight | number | 0 | 预估标签栏高度 | | stickyEnabled | boolean | true | 是否启用吸顶效果 | | stickyTop | number | 0 | 吸顶距离顶部的距离 | | swipeEnabled | boolean | true | 是否启用滑动切换 | | initialTabIndex | number | 0 | 初始标签页索引 | | onTabChange | (index: number) => void | - | 标签页切换回调 | | onScroll | (scrollY: number) => void | - | 滚动回调 | | style | StyleProp<ViewStyle> | - | 容器样式 |

TabFlatList

继承所有 FlatList 的 Props。

| 属性 | 类型 | 说明 | |------|------|------| | data | T[] | 列表数据 | | renderItem | (info: { item: T, index: number }) => ReactNode | 列表项渲染函数 | | keyExtractor | (item: T, index: number) => string | 列表项 key |

TabSectionList

继承所有 SectionList 的 Props。

| 属性 | 类型 | 说明 | |------|------|------| | sections | SectionListData[] | 分组数据 | | renderItem | (info: { item: T, index: number, section: S }) => ReactNode | 列表项渲染函数 | | renderSectionHeader | (info: { section: S }) => ReactNode | 分组头部渲染函数 | | keyExtractor | (item: T, index: number) => string | 列表项 key |

Ref Methods

interface CollapsibleTabViewRef {
  scrollToTab(index: number, animated?: boolean): void;
  getActiveIndex(): number;
}

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request!

作者

• GitHub: @MasterZuom