ReactNative进阶（三十七）：应用 SectionList 实现分组列表

系统管理员 2022-10-17 04:10 285阅读 0赞

### 文章目录 ###

*   *  一、SectionList 简述
     *   *  1.1 属性集合
         *  1.2 方法集合
     *  二、应用示例
     *  三、拓展阅读

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]

## 一、SectionList 简述 ##

`ReactNative`长列表数据组件一共有三个：

*  `ListView` 核心组件，数据量大时性能较差，占用内存持续增加，故诞生[FlatList组件][FlatList]。
 *  [FlatList][] 用于替代 `ListView`，支持下拉刷新和上拉加载。
 *  [SectionList][] 高性能的分组列表组件。

其中，[SectionList][]支持下面的常用功能：

>  *  完全跨平台；
>  *  支持水平布局模式；
>  *  行组件显示或隐藏时可配置回调事件；
>  *  支持单独的头部组件；
>  *  支持单独的尾部组件；
>  *  支持自定义行间分隔线；
>  *  支持下拉刷新；
>  *  支持上拉加载；

### 1.1 属性集合 ###

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

### 1.2 方法集合 ###

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

## 二、应用示例 ##

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);

## 三、拓展阅读 ##

*  [官方文档][SectionList]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]: /images/20221014/963ae0018f804740a8b9d2d47cdb3023.png
[FlatList]: https://reactnative.cn/docs/flatlist.html#docsNav
[SectionList]: https://reactnative.cn/docs/sectionlist