Installation

yarn add --dev @dfeidao/fd-m000019

fd-m000019 分组列表组件SectionList

import SectionList from '@dfeidao/fd-m000019';

<SectionList
	renderItem={({ item, index }) => <Text key={index}>{item as ReactNode}</Text>}
	renderSectionHeader={({ section: { title } }) => (
		<Text style={{ fontWeight: 'bold' }}>{title}</Text>
	)}
	sections={[
		{ title: 'Title1', data: ['item1', 'item2'] },
		{ title: 'Title2', data: ['item3', 'item4'] },
		{ title: 'Title3', data: ['item5', 'item6'] }
	]}
	keyExtractor={(item, index) => (item as string) + index}
/>

Installation

yarn add --dev @dfeidao/fd-m000019

Attributes

sections

用来渲染的数据，类似于FlatList中的data属性。

renderItem

用来渲染每一个section中的每一个列表项的默认渲染器。可以在section级别上进行覆盖重写。必须返回一个react组件。

renderSectionHeader

在每个section的头部渲染。在iOS上，这些headers是默认粘接在ScrollView的顶部的.

ItemSeparatorComponent

行与行之间的分隔线组件不会出现在第一行之前和最后一行之后

ListEmptyComponent

列表为空时渲染该组件

ListFooterComponent

尾部组件

ListHeaderComponent

头部组件

initialNumToRender

指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载，这样是为了保证用户执行返回顶部的操作时，不需要重新渲染首批元素。

onEndReached

当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。

onEndReachedThreshold

决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5 表示距离内容最底部的距离为当前列表可见长度的一半时触发。

onRefresh

如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。

refreshing

在等待加载新数据时将此属性设为 true，列表就会显示出一个正在加载的符号。

详细信息可以查看官方文档 https://reactnative.cn/docs/sectionlist/