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

 React Native系列

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

《ReactNative开发工具备这一篇足矣》 

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

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

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

---

 

目录

一、SectionList简述
二、SectionList经常使用属性和方法
三、SectionList示例，通信录实现以及源码

正文

一、SectionList简述

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

 

二、SectionList经常使用属性和方法

属性集合

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

方法集合：

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

三、SectionList示例，通信录实现以及源码

 

源码：

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

 

小技巧：如何隐藏header？

static navigationOptions = {

　　header: null

};

设置header为null便可隐藏。