react-native列表FlatList下拉刷新上拉加載更多實現(xiàn)

具體代碼懶得擇了,這里只給出比官網(wǎng)文檔全一點的FlatList的使用說明吧

<FlatList

style={{backgroundColor:v.c_white,paddingBottom:50,marginBottom:50}}

data={this.state.listData}

renderItem={this._flatlistitem}

ListHeaderComponent={this._header}

ListEmptyComponent={this._empty}

ListFooterComponent={this._footer}

keyExtractor={this._keyExtractor}

onRefresh={() => {

this.setState({nextpage:1})

this._fetchlist()

}}

refreshing={this.state.nextpage==1?true:false}

onEndReachedThreshold={0.1}

onEndReached={(info) => {

this._fetchlist()

}}

/>

style:設(shè)置樣式

data: 數(shù)組對象(我的是jsonarray)

renderItem:這里傳入一個函數(shù),用來創(chuàng)建每個item,FlatList在加載時會傳入一個item對象,這個item對象就是上邊data對象數(shù)組的每一子項數(shù)據(jù)

ListHeaderComponent: 傳入一個header函數(shù),生成FlatList的header界面

ListEmptyComponent: 傳入一個empty函數(shù), 空數(shù)據(jù)時顯示的界面

ListFooterComponent: 傳入一個footer函數(shù),生成FlatList的footer界面(我用來做上拉顯示加載更多)

onRefresh: 此屬性實現(xiàn)下拉刷新, 傳入下拉后重新加載數(shù)據(jù)函數(shù)

refreshing:狀態(tài)顯示控制,就是在沒有加載完成之前,設(shè)置成true,則一直顯示轉(zhuǎn)圈,加載完成設(shè)置成false,圈消失,加載完成.我這里用state來控制

keyExtractor: 自己生成一個擴展key,代碼如下:

_keyExtractor= (item,index) =>index

onEndReachedThreshold: 決定當(dāng)距離內(nèi)容最底部還有多遠時觸發(fā)onEndReached回調(diào)。注意此參數(shù)是一個比值而非像素單位。比如，0.5表示距離內(nèi)容最底部的距離為當(dāng)前列表可見長度的一半時觸發(fā)。(官方文檔,照搬過來)

我項目里直接使用0.1,來實現(xiàn)上拉加載更多的時機.

onEndReached: 當(dāng)列表被滾動到距離內(nèi)容最底部不足onEndReachedThreshold的距離時調(diào)用.

這個函數(shù)里實現(xiàn)加載更多數(shù)據(jù),并且更新state,來實現(xiàn)列表更新