前言:

上一章我們學習了FlatList組件,本章我們來學習SectionList組件,當界面需要分區的顯示時候我們采用這個組件.

常用API:

SectionList是高性能的分組列表組件.實質是基於<VirtualizedList>組件的封裝<SectionList

    style={{marginTop:20,width:width}}
    renderSectionHeader={() => <Text  我是區頭/>} //區頭
    renderItem={() => <Text>我是cell</Text>}   //cell
    sections={this.state.sections}     //數據源
    ItemSeparatorComponent={() => <View style={{backgroundColor:‘red‘,height:1}}></View>}  //分割線
    stickySectionHeadersEnabled={false}  //設置區頭是否懸浮在屏幕頂部,默認是true
    ListEmptyComponent = {() => <Text>沒有數據哦</Text>} // 數據為空時調用
    initialNumToRender = {2} //指定一開始渲染的元素數量，最好剛剛夠填滿一個屏幕，這樣保證了用最短的時間給用戶呈現可見的內容
    onEndReachedThreshold = {0.001}  //0.5表示距離內容最底部的距離為當前列表可見長度的一半時觸發。
    onEndReached = {() => {alert(123)}}  //當列表被滾動到距離內容最底部不足onEndReachedThreshold的距離時調用。
    setVerticalScrollBarEnabled = {false}
    setFastScrollEnabled = {false}
    refreshing={this.state.refreshing} // 是否刷新 ，自帶刷新控件
    onRefresh={()=>{
        this.refresh();
    }} // 刷新方法,寫了此方法，下拉才會出現  刷新控件，使用此方法必須寫 refreshing
    ListHeaderComponent={() => <View style={{ backgroundColor: ‘#25B960‘, alignItems: ‘center‘, height: 30 }}><Text style={{ fontSize: 18, color: ‘#ffffff‘,lineHeight:30 }}>通訊錄</Text></View>}
    ListFooterComponent={() => <View style={{ backgroundColor: ‘#25B960‘, alignItems: ‘center‘, height: 30 }}><Text style={{ fontSize: 18, color: ‘#ffffff‘ ,lineHeight:30}}>通訊錄尾部</Text></View>}
/>

 
實戰:
   我們來進行一個簡單的實例,實現一個帶刷新的通訊錄效果,先來看一下最終效果


思路:
主要思路就是1,引入SectionList文件->創建構造器申明數據源->頁面布局SectionList設置常用屬性並傳遞數據源->在cell和區頭中從數據源取值並賦值.

源代碼:

import React, {Component} from ‘react‘;
import { StyleSheet, Text, View,SectionList,Dimensions} from ‘react-native‘;   //引入js文件

var {width} = Dimensions.get(‘window‘);

type Props = {};
export default class App extends Component<Props> {
   constructor(props) { //構造器
     super(props);
     this.state = {
         refreshing: false,  //是否刷新,通過更改此屬性來控制是否刷新
         sections:[   //數據源
             { key: "A", data: [{ title: "啊是啊" }, { title: "阿瑪尼" }, { title: "愛你" }] },
             { key: "B", data: [{ title: "婊子" }, { title: "貝貝" }, { title: "表弟" }, { title: "表姐" }, { title: "表叔" }] },
             { key: "C", data: [{ title: "陳鑫" }, { title: "吃點飯是" }] },
             { key: "D", data: [{ title: "大哥" }, { title: "地方" }, { title: "大大" },{ title: "大雞雞" }, { title: "大屌" }, { title: "大屌me幹嘛" }] },
         ]
     };
   }
    /*刷新*/
    refresh(){
        this.setState({
            refreshing: true,
        });
        setTimeout(()=>{  //通過定時器來模擬刷新
            this.setState({
                refreshing: false,
            });
        },2000);
    }

  render() {
    return (
      <View style={{flex: 1,}}>
          <SectionList
              style={{marginTop:20,width:width}}
              renderSectionHeader={this._sectionComp} //區頭
              renderItem={this._renderItem}   //cell
              sections={this.state.sections}     //數據源
              ItemSeparatorComponent={() => <View style={{backgroundColor:‘red‘,height:1}}></View>}  //分割線
              stickySectionHeadersEnabled={false}  //設置區頭是否懸浮在屏幕頂部,默認是true
              ListEmptyComponent = {() => <Text>沒有數據哦</Text>} // 數據為空時調用
              initialNumToRender = {2} //指定一開始渲染的元素數量，最好剛剛夠填滿一個屏幕，這樣保證了用最短的時間給用戶呈現可見的內容
              onEndReachedThreshold = {0.001}  //0.5表示距離內容最底部的距離為當前列表可見長度的一半時觸發。
              onEndReached = {() => {alert(123)}}  //當列表被滾動到距離內容最底部不足onEndReachedThreshold的距離時調用。
              setVerticalScrollBarEnabled = {false}
              setFastScrollEnabled = {false}
              refreshing={this.state.refreshing} // 是否刷新 ，自帶刷新控件
              onRefresh={()=>{
                  this.refresh();
              }} // 刷新方法,寫了此方法，下拉才會出現  刷新控件，使用此方法必須寫 refreshing
              ListHeaderComponent={() => <View style={{ backgroundColor: ‘#25B960‘, alignItems: ‘center‘, height: 30 }}><Text style={{ fontSize: 18, color: ‘#ffffff‘,lineHeight:30 }}>通訊錄</Text></View>}
              ListFooterComponent={() => <View style={{ backgroundColor: ‘#25B960‘, alignItems: ‘center‘, height: 30 }}><Text style={{ fontSize: 18, color: ‘#ffffff‘ ,lineHeight:30}}>通訊錄尾部</Text></View>}
          />
      </View>
    );
  }
    _renderItem = (info) => {
        var txt = ‘  ‘ + info.item.title;   //取到數據源中的title
        return <Text
            style={{ height: 60,lineHeight:60, textAlign: ‘center‘, backgroundColor: "#ffffff", color: ‘#5C5C5C‘, fontSize: 15 }}>{txt}</Text>
    }

    _sectionComp = (info) => {
        var txt = info.section.key;
        return <Text
            style={{ height: 50, textAlign: ‘center‘, lineHeight:50, backgroundColor: ‘#9CEBBC‘, color: ‘white‘, fontSize: 30 }}>{txt}</Text>
    }
}

到這裏我們就實現了.如果對你有幫助,請分享給身邊的朋友.讓我們一起進步!

React-Native中列表SectionList學習