史上最易懂——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使用詳情及示例詳解》

---

 

目錄

1、SectionList簡述
2、SectionList常用屬性和方法
3、SectionList示例，通訊錄實現以及源碼

正文

1、SectionList簡述

ReactNative長列表數據組件一共有三個：
　　ListView 核心組件，數據量大時性能較差，占用內存持續增加，故設計出來FlatList組件。
　　FlatList 用於替代ListView，支持下拉刷新和上拉加載。
　　SectionList 高性能的分組列表組件。
本文重點介紹SectionList，SectionList支持下面的常用功能：
　　完全跨平台
　　支持水平布局模式
　　行組件顯示或隱藏時可配置回調事件
　　支持單獨的頭部組件
　　支持單獨的尾部組件
　　支持自定義行間分隔線
　　支持下拉刷新
　　支持上拉加載

 

2、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	短暫地顯示滾動指示器。

3、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即可隱藏。