史上最易懂——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便可隱藏。