React Native 經常使用三種列表渲染組件FlatList(普通),SwipeableFlatList(側滑刪除),sectionList(分組)

關於FlatList的使用

要使用必需要先引入FlatList

import { FlatList } from 'react-native';
複製代碼

ListHeaderComponent屬性,

用來定義頭部組件

ListHeaderComponent={()=> this._createListHeader()}

_createListHeader(){
	return (
        <View style={styles.headView}>
            <Text style={{color: 'white'}}>
                頭部佈局
            </Text>
        </View>
    )
}
複製代碼

ListFooterComponent屬性

用來定義尾部

ListFooterComponent = {()=> this._createListFooter()}

_createListFooter(){
    return(
        <View style="style.indicatorContainer">
            {	this.state.showFoot === 1
            && 
            <ActivityIndicator
            	style={styles.indicator}
            	size = 'small'
            	animating = {true}
            	color = 'red'
            />
            }
            <Text>{this.state.showFoot === 1?'正在加載更多數據...':'沒有更多數據'}</Text>
        </View>
    )
}
複製代碼

ItemSeparatorComponent屬性

用來定義分割線

ItemSeparatorComponent = {()=>this._createSeparatorComponent()}

_createSeparatorComponent(){
	return(
		<View style={{height: 5, backgroundColor: '#eeeeee'}}/>
	)
}
複製代碼

ListEmptyComponent屬性

爲FlatList設置一個沒有數據時候的展現的視圖

設置item的key值

必需要爲item設置key屬性，不然會有一個黃色的警告彈出。並且咱們須要注意的是這裏每個item的key是惟一的！

keyExtractor={this._keyExtractor}

_keyExtractor(item, index){
	return `index${index}`
}
複製代碼

• itemLayout

屬性是一個可選的優化，用於避免動態測量內容尺寸的開銷。若是咱們知道item的高度，就能夠爲FlatList指定這一個屬性，來使FlatList更加高效的運行！

//200爲item的高度,5爲分割線的高度
getItemLayout={(data, index) => ({
  length:200, offset: (200 + 5) * index, index
})}
複製代碼

下拉刷新

FlatList中有兩個屬性，能夠用來設置下拉刷新。

• refreshing在等待加載新數據時將此屬性設爲true，列表就會顯示出一個正在加載的符號.
• onRefresh若是設置了此選項，則會在列表頭部添加一個標準的RefreshControl控件，以便實現「下拉刷新」的功能。同時你須要正確設置refreshing屬性。

//不須要自定義樣式的時候
/*refreshing = { this.state.is_Loading }
onRefresh = {()=>{
	this.loadData();
}}*/

//修改loading樣式
refreshControl = {
    <RefreshControl
        title = {'loading'}
        colors = {['red']}//android
        tintColor = {'red'}//ios
        refreshing = { this.state.is_Loading }
        onRefresh = {()=>{
        	this._onRefresh();
        }}
    />
}

_onRefresh(){
	...
	//下拉刷新的方法
}
複製代碼

上拉加載

上拉加載，FlatList封裝兩個屬性來實現：

• onEndReachedThreshold：這個屬性決定當距離內容最底部還有多遠時觸發onEndReached回調。須要注意的是此參數是一個比值而非像素單位。好比，0.5表示距離內容最底部的距離爲當前列表可見長度的一半時觸發。因此它的取值範圍爲：(0,1)，不包含0和1。
• onEndReached：列表被滾動到距離內容最底部不足onEndReachedThreshold設置的的距離時調用。

onEndReached ={()=>{
	this._onLoadMore();
}}
onEndReachedThreshold={0.1}
複製代碼

隱藏滑動指示條

• 設置滑動爲橫向

horizontal={true}
複製代碼

• 隱藏垂直滾動條

showsVerticalScrollIndicator={false}
複製代碼

• 隱藏水平滾動條

showsHorizontalScrollIndicator={false}
複製代碼

經常使用函數

• scrollToEnd 滾動條到底部

1. 須要爲FlatList設置ref屬性綁定flatList
<FlatList ref={(flatList) => this._flatList = flatList}/>
2.	調用
_toEnd(){
	this._flatList.scrollToEnd();
}
複製代碼

• scrollToIndex 滾動到指定index位置

1. 須要爲FlatList設置ref屬性綁定flatList
<FlatList ref={(flatList) => this._flatList = flatList}/>

2.	調用
_toItem(){
	//viewPosition參數：0表示頂部，0.5表示中部，1表示底部
	this._flatList.scrollToIndex({viewPosition: 0, index: this.state.index});
}
複製代碼

關於SwipeableFlatList 的使用

支持FlatList的全部的屬性和方法,另外新增3個自有屬性.

• bounceFirstRowOnMount：Boolean

默認是true,表示第一次是否先滑一下FlatList的Item

• maxSwipeDistance

必需要賦值，表示向左滑動的最大距離

• renderQuickActions：func

必需要賦值，表示滑動顯示的內容。

<SwipeableFlatList 
    renderQuickActions={()=>this.genQuickAction()}
	maxSwipeDistance={50}
	bounceFirstRowOnMount={false}/>
//渲染
genQuickAction(){
    return <View style={styles.quickContiner}>
        <TouchableHighlight>
            <View>
            <Text 
            	style={styles.delText}
            	onPress={()=>{
            		alert("您肯定要刪除嗎？")
            	}}>刪除</Text>
            </View>
        </TouchableHighlight>
    </View>
}
複製代碼

關於SectionList 的使用

• 徹底跨平臺
• 支持水平佈局模式
• 行組件顯示或隱藏時可配置回調事件
• 支持單獨的頭部組件
• 支持單獨的尾部組件
• 支持自定義行間分隔線
• 支持下拉刷新
• 支持上拉加載

<SectionList
    sections={this.state.CITY_NAMES}//須要綁定的數據
    renderItem={(data) => this._renderItem(data)}
    ItemSeparatorComponent = {()=>this._createSeparatorComponent()}
    keyExtractor={this._keyExtractor}
    renderSectionHeader={(data)=>this._renderSectionHeader(data)}//分組的頭部
    refreshControl = {
    	<RefreshControl
    		title={'loading'}
    		colors={['red']}
    		refreshing= { this.state.is_Loading }
    		onRefresh={() => this._onRefresh()}
    	/>
    }
/>
複製代碼

DEMO