React Native之SectionList介绍一

最新推荐文章于 2024-04-28 22:20:13 发布

mayundoyouknow

最新推荐文章于 2024-04-28 22:20:13 发布

阅读量997

点赞数

分类专栏： React Native 文章标签： sectionList FlatList 分组列表

本文链接：https://blog.csdn.net/ahou2468/article/details/90212840

版权

本文介绍了React Native中的SectionList组件，用于创建分组列表。SectionList支持跨平台，提供行显示/隐藏回调，自定义头部和尾部组件，分组头部组件和分隔线等功能。关键属性包括sections（数据源）和renderItem（渲染每个列表项）。使用示例中详细展示了如何配置和使用SectionList。

摘要由CSDN通过智能技术生成

本组件实质是基于<VirtualizedList>组件的封装，继承了其所有 props（也包括所有<ScrollView>)的 props）。此外还有下面这些需要注意的事项：

当某行滑出渲染区域之外后，其内部状态将不会保留。请确保你在行组件以外的地方保留了数据。
本组件继承自PureComponent而非通常的Component，这意味着如果其props在浅比较中是相等的，则不会重新渲染。所以请先检查你的renderItem函数所依赖的props数据（包括data属性以及可能用到的父组件的state），如果是一个引用类型（Object或者数组都是引用类型），则需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新。（译注：这一段不了解的朋友建议先学习下js中的基本类型和引用类型。）
为了优化内存占用同时保持滑动的流畅，列表内容会在屏幕外异步绘制。这意味着如果用户滑动的速度超过渲染的速度，则会先看到空白的内容。这是为了优化不得不作出的妥协，而我们也在设法持续改进。
默认情况下每行都需要提供一个不重复的key属性。你也可以提供一个keyExtractor函数来生成key。

1.SectionList是什么？

通常简单的列表显示会选用FlatList，涉及分组显示列表时（例如：通讯录，城市选择列表）我们会选用SectionList，SectionList主要用于显示分组列表；

城市列表效果图：

2.SectionList支持哪些功能？

a.完全跨平台，即支持IOS和Android。
b.行组件显示或隐藏时可配置回调事件。
c.支持单独的头部组件。
d.支持单独的尾部组件。
e.支持自定义行间分隔线。
f.支持分组的头部组件。
g.支持分组的分隔线。
h.支持多种数据源结构
i.支持下拉刷新。
j.支持上拉加载。

3.SectionList关键属性？

3.1sections

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

sections属性的数据结构，参考：

title：对应可以显示分组的标题；

data：对应显示分组下的内容列表；

{[
    { title: "Title1", data: ["item1", "item2"] },
    { title: "Title2", data: ["item3", "item4"] },
    { title: "Title3", data: ["item5", "item6"] }
  ]}

3.2renderItem

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

包含三个参数，分别要显示的内容item（object），分组中对应的索引位置index（number），在sections中的完整的对象section(object)；

renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>}

注意：以上sections和renderItem属性是必须配置的两个属性；

3.3非必须属性

属性名称	属性说明	数据类型	使用示例	备注
`keyExtractor`	此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。若不指定此函数，则默认抽取item.key作为key值。若item.key也不存在，则使用数组下标。注意这只设置了每行（item）的key，对于每个组（section）仍然需要另外设置key。	(item: Item, index: number) => string	keyExtractor={this._keyExtractor} //定义指定key的函数 _keyExtractor=(item, index) => item.title(返回唯一不重复的key);
`initialNumToRender`	指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载，这样是为了保证用户执行返回顶部的操作时，不需要重新渲染首批元素。	number	`initialNumToRender={10}`
`onEndReached`	当列表被滚动到距离内容最底部不足