史上最易懂——ReactNative分组列表SectionList使用详情及示例详解

素颜马尾好姑娘i 2023-10-17 21:02 61阅读 0赞

**React Native系列**

[《逻辑性最强的React Native环境搭建与调试》][React Native]

[《ReactNative开发工具有这一篇足矣》][ReactNative]

[《解决React Native unable to load script from assets index.android.bundle on windows》][React Native unable to load script from assets index.android.bundle on windows]

[《React Native App设置&Android版发布》][React Native App_Android]

[《史上最易懂——ReactNative分组列表SectionList使用详情及示例详解》][ReactNative_SectionList]

--------------------

![172074-20170728153442040-373050722.png][]

### 目录 ###

#### **1、SectionList简述**   **2、SectionList常用属性和方法**   **3、SectionList示例，通讯录实现以及源码** ####

### **正文** ###

#### **1、SectionList简述** ####

ReactNative长列表数据组件一共有三个：  
　　ListView 核心组件，数据量大时性能较差，占用内存持续增加，故设计出来FlatList组件。  
　　FlatList 用于替代ListView，支持下拉刷新和上拉加载。  
　　SectionList 高性能的分组列表组件。  
本文重点介绍SectionList，SectionList支持下面的常用功能：  
　　完全跨平台  
　　支持水平布局模式  
　　行组件显示或隐藏时可配置回调事件  
　　支持单独的头部组件  
　　支持单独的尾部组件  
　　支持自定义行间分隔线  
　　支持下拉刷新  
　　支持上拉加载

#### **2、SectionList常用属性和方法** ####

属性集合

<table style="height: 1807px; width: 1520px; font-family: 宋体;"> 
 <tbody> 
 <tr> 
 <td style="text-align: center;"> 属性名 </td> 
 <td style="text-align: center;"> 类型 </td> 
 <td style="text-align: center;"> 说明 </td> 
 </tr> 
 <tr> 
 <td> sections </td> 
 <td> Array </td> 
 <td> 数据源 </td> 
 </tr> 
 <tr> 
 <td> ItemSeparatorComponent </td> 
 <td> <code>ReactClass&lt;any&gt;</code> </td> 
 <td> 行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后 </td> 
 </tr> 
 <tr> 
 <td> SectionSeparatorComponent&nbsp; </td> 
 <td> ReactClass&lt;any&gt; </td> 
 <td> 每个section之间的分隔组件 </td> 
 </tr> 
 <tr> 
 <td>ListEmptyComponent </td> 
 <td>ReactClass&lt;any&gt; | React.Element&lt;any&gt; </td> 
 <td> 列表为空时渲染该组件。可以是React Component, 也可以是一个render函数， 或者渲染好的element。 </td> 
 </tr> 
 <tr> 
 <td> ListFooterComponent </td> 
 <td> <code>ReactClass&lt;any&gt;</code> </td> 
 <td> 尾部组件 </td> 
 </tr> 
 <tr> 
 <td> ListHeaderComponent </td> 
 <td> <code>ReactClass&lt;any&gt;</code> </td> 
 <td> 头部组件 </td> 
 </tr> 
 <tr> 
 <td> data </td> 
 <td> <code>Array&lt;ItemT&gt;</code> </td> 
 <td> 为了简化起见，data属性目前只支持普通数组。如果需要使用其他特殊数据结构，例如immutable数组，请直接使用更底层的<code>VirtualizedList</code>组件 </td> 
 </tr> 
 <tr> 
 <td> extraData </td> 
 <td> any </td> 
 <td> 如果有除<code>data</code>以外的数据用在列表中（不论是用在<code>renderItem</code>还是Header或者Footer中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新。 </td> 
 </tr> 
 <tr> 
 <td> getItem </td> 
 <td> any </td> 
 <td> 获取控件的绑定数据 </td> 
 </tr> 
 <tr> 
 <td> getItemCount </td> 
 <td> any </td> 
 <td> 获取绑定数据的条数 </td> 
 </tr> 
 <tr> 
 <td> getItemLayout </td> 
 <td> <code>(data: ?Array&lt;ItemT&gt;, index: number) =&gt; {length: number, offset: number, index: number}</code> </td> 
 <td> <code>getItemLayout</code>是一个可选的优化，用于避免动态测量内容尺寸的开销，不过前提是你可以提前知道内容的高度。如果你的行高是固定的，<code>getItemLayout</code>用起来就既高效又简单，类似下面这样： getItemLayout={ (data,&nbsp;index)&nbsp;=&gt;&nbsp;(&nbsp;{length:&nbsp;行高,&nbsp;offset:&nbsp;行高&nbsp;*&nbsp;index,&nbsp;index}&nbsp;)} 注意如果你指定了<code>SeparatorComponent</code>，请把分隔线的尺寸也考虑到offset的计算之中。 </td> 
 </tr> 
 <tr> 
 <td> initialNumToRender </td> 
 <td> number&nbsp; </td> 
 <td> 指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载，这样是为了保证用户执行返回顶部的操作时，不需要重新渲染首批元素。 </td> 
 </tr> 
 <tr> 
 <td> keyExtractor </td> 
 <td> <code>(item: ItemT, index: number) =&gt; string</code> </td> 
 <td> 此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。若不指定此函数，则默认抽取<code>item.key</code>作为key值。若<code>item.key</code>也不存在，则使用数组下标。 </td> 
 </tr> 
 <tr> 
 <td> legacyImplementation </td> 
 <td> <code>boolean</code>&nbsp; </td> 
 <td> 设置为true则使用旧的ListView的实现 </td> 
 </tr> 
 <tr> 
 <td> onEndReached </td> 
 <td> <code>(info: {distanceFromEnd: number}) =&gt; void</code> </td> 
 <td> 当列表被滚动到距离内容最底部不足<code>onEndReachedThreshold</code>的距离时调用 </td> 
 </tr> 
 <tr> 
 <td> onEndReachedThreshold </td> 
 <td> number&nbsp; </td> 
 <td> 决定当距离内容最底部还有多远时触发<code>onEndReached</code>回调。注意此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发 </td> 
 </tr> 
 <tr> 
 <td> onRefresh </td> 
 <td> <code>void</code> </td> 
 <td> 如果设置了此选项，则会在列表头部添加一个标准的<code>RefreshControl</code>控件，以便实现“下拉刷新”的功能。同时你需要正确设置<code>refreshing</code>属性 </td> 
 </tr> 
 <tr> 
 <td> onViewableItemsChanged </td> 
 <td> <code>(info: {viewableItems: Array&lt;ViewToken&gt;, changed: Array&lt;ViewToken&gt;}) =&gt; void</code> </td> 
 <td> 在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置<code>viewabilityconfig</code>属性 </td> 
 </tr> 
 <tr> 
 <td> refreshing </td> 
 <td> <code>boolean</code>&nbsp; </td> 
 <td> 在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号 </td> 
 </tr> 
 <tr> 
 <td> renderItem </td> 
 <td> <code>(info: {item: ItemT, index: number}) =&gt; ?React.Element&lt;any&gt;</code> </td> 
 <td> 根据行数据<code>data</code>渲染每一行的组件 </td> 
 </tr> 
 <tr> 
 <td> viewabilityConfig </td> 
 <td> <code>ViewabilityConfig</code>&nbsp; </td> 
 <td> 请参考<a href="https://github.com/facebook/react-native/blob/master/Libraries/Lists/ViewabilityHelper.js" rel="nofollow"><code>ViewabilityHelper</code></a>的源码来了解具体的配置 </td> 
 </tr> 
 </tbody> 
</table>

方法集合：

<table style="height: 374px; width: 1464px;"> 
 <tbody> 
 <tr> 
 <td style="text-align: center;">方法名</td> 
 <td style="text-align: center;">说明</td> 
 </tr> 
 <tr> 
 <td> scrollToLocation </td> 
 <td> 将可视区内位于特定sectionIndex 或 itemIndex (section内)位置的列表项，滚动到可视区的制定位置。比如说，viewPosition 为0时将这个列表项滚动到可视区顶部 (可能会被顶部粘接的header覆盖), 为1时将它滚动到可视区底部, 为0.5时将它滚动到可视区中央。viewOffset是一个以像素为单位，到最终位置偏移距离的固定值，比如为了弥补粘接的header所占据的空间 注意: 如果没有设置getItemLayout，就不能滚动到位于外部渲染区的位置。 </td> 
 </tr> 
 <tr> 
 <td> recordInteraction </td> 
 <td> 主动通知列表发生了一个事件，以使列表重新计算可视区域。比如说当waitForInteractions 为 true 并且用户没有滚动列表时，就可以调用这个方法。不过一般来说，当用户点击了一个列表项，或发生了一个导航动作时，我们就可以调用这个方法。 </td> 
 </tr> 
 <tr> 
 <td> flashScrollIndicators </td> 
 <td> 短暂地显示滚动指示器。 </td> 
 </tr> 
 </tbody> 
</table>

#### **3、SectionList示例，通讯录实现以及源码** ####

**![172074-20170728160253071-779742357.gif][]**

**源码：**

import React, { Component } from 'react';
 import {
 AppRegistry,
 View,
 Text,
 SectionList,
 } from 'react-native';
 
 
 
 class HomeScreen extends React.Component {
 
 constructor(props) {
 super(props);
 }
 
 _renderItem = (info) => {
 var txt = ' ' + info.item.title;
 return <Text
 style={
 { height: 60, textAlignVertical: 'center', backgroundColor: "#ffffff", color: '#5C5C5C', fontSize: 15 }}>{txt}</Text>
 }
 
 _sectionComp = (info) => {
 var txt = info.section.key;
 return <Text
 style={
 { height: 50, textAlign: 'center', textAlignVertical: 'center', backgroundColor: '#9CEBBC', color: 'white', fontSize: 30 }}>{txt}</Text>
 }
 
 render() {
 var sections = [
 { key: "A", data: [{ title: "阿童木" }, { title: "阿玛尼" }, { title: "爱多多" }] },
 { key: "B", data: [{ title: "表哥" }, { title: "贝贝" }, { title: "表弟" }, { title: "表姐" }, { title: "表叔" }] },
 { key: "C", data: [{ title: "成吉思汗" }, { title: "超市快递" }] },
 { key: "W", data: [{ title: "王磊" }, { title: "王者荣耀" }, { title: "往事不能回味" },{ title: "王小磊" }, { title: "王中磊" }, { title: "王大磊" }] },
 ];
 
 return (
 <View style={
 { flex: 1 }}>
 <SectionList
 renderSectionHeader={this._sectionComp}
 renderItem={this._renderItem}
 sections={sections}
 ItemSeparatorComponent={() => <View><Text></Text></View>}
 ListHeaderComponent={() => <View style={
 { backgroundColor: '#25B960', alignItems: 'center', height: 30 }}><Text style={
 { fontSize: 18, color: '#ffffff' }}>通讯录</Text></View>}
 ListFooterComponent={() => <View style={
 { backgroundColor: '#25B960', alignItems: 'center', height: 30 }}><Text style={
 { fontSize: 18, color: '#ffffff' }}>通讯录尾部</Text></View>}
 />
 </View>
 );
 }
 
 }
 
 AppRegistry.registerComponent('App', () => HomeScreen);

附源码github地址：[https://github.com/vipstone/react-nation-sectionlist][https_github.com_vipstone_react-nation-sectionlist]

> ### 小技巧：如何隐藏header？ ###
> 
> static navigationOptions = \{ 
> 
> 　　header: null
> 
> \};
> 
> 设置header为null即可隐藏。

[React Native]: http://www.cnblogs.com/vipstone/p/7112569.html
[ReactNative]: http://www.cnblogs.com/vipstone/p/7125338.html
[React Native unable to load script from assets index.android.bundle on windows]: http://www.cnblogs.com/vipstone/p/7205608.html
[React Native App_Android]: http://www.cnblogs.com/vipstone/p/7217558.html
[ReactNative_SectionList]: http://www.cnblogs.com/vipstone/p/7250625.html
[172074-20170728153442040-373050722.png]: https://images2017.cnblogs.com/blog/172074/201707/172074-20170728153442040-373050722.png
[172074-20170728160253071-779742357.gif]: https://images2017.cnblogs.com/blog/172074/201707/172074-20170728160253071-779742357.gif
[https_github.com_vipstone_react-nation-sectionlist]: https://github.com/vipstone/react-nation-sectionlist