react-native列表FlatList下拉刷新上拉加載更多實(shí)現(xiàn)
具體代碼懶得擇了,這里只給出比官網(wǎng)文檔全一點(diǎn)的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ù)組對(duì)象(我的是jsonarray)
renderItem:這里傳入一個(gè)函數(shù),用來創(chuàng)建每個(gè)item,FlatList在加載時(shí)會(huì)傳入一個(gè)item對(duì)象,這個(gè)item對(duì)象就是上邊data對(duì)象數(shù)組的每一子項(xiàng)數(shù)據(jù)
ListHeaderComponent: 傳入一個(gè)header函數(shù),生成FlatList的header界面
ListEmptyComponent: 傳入一個(gè)empty函數(shù), 空數(shù)據(jù)時(shí)顯示的界面
ListFooterComponent: 傳入一個(gè)footer函數(shù),生成FlatList的footer界面(我用來做上拉顯示加載更多)
onRefresh: 此屬性實(shí)現(xiàn)下拉刷新, 傳入下拉后重新加載數(shù)據(jù)函數(shù)
refreshing:狀態(tài)顯示控制,就是在沒有加載完成之前,設(shè)置成true,則一直顯示轉(zhuǎn)圈,加載完成設(shè)置成false,圈消失,加載完成.我這里用state來控制
keyExtractor: 自己生成一個(gè)擴(kuò)展key,代碼如下:
_keyExtractor= (item,index) =>index
onEndReachedThreshold: 決定當(dāng)距離內(nèi)容最底部還有多遠(yuǎn)時(shí)觸發(fā)onEndReached回調(diào)崩哩。注意此參數(shù)是一個(gè)比值而非像素單位。比如言沐，0.5表示距離內(nèi)容最底部的距離為當(dāng)前列表可見長度的一半時(shí)觸發(fā)邓嘹。(官方文檔,照搬過來)
我項(xiàng)目里直接使用0.1,來實(shí)現(xiàn)上拉加載更多的時(shí)機(jī).
onEndReached: 當(dāng)列表被滾動(dòng)到距離內(nèi)容最底部不足onEndReachedThreshold的距離時(shí)調(diào)用.
這個(gè)函數(shù)里實(shí)現(xiàn)加載更多數(shù)據(jù),并且更新state,來實(shí)現(xiàn)列表更新
