React Native 五上下拉重新整理載入

下拉重新整理我們使用react native提供的元件refreshcontrol，去newslist.js的listview新增：

flex:1, backgroundcolor:'white'}}
datasource= //設定資料來源
renderrow= //設定cell
removeclippedsubviews=
refreshcontrol=
onrefresh=
tintcolor="#999999"
title="載入中..."
titlecolor="#999999"
colors=
progressbackgroundcolor="#ffff00"
/>
}/>

listview新加了乙個屬性removeclippedsubviews。原因

我們需要給state新增乙個key：isrefreshing: false，然後在網路請求時對它進行處理，（我這裡省略了一些**，要不然太長）

_begainrefresh() )
}_endrefresh() )
}_onrefresh(page) )
}let url = ''
fetch(url, ,
}).then((res) => )
.catch((e) => )
}).catch((error) => )
}}

現在執行程式就可以盡情地下拉重新整理了。

上拉載入我們利用listview的 onendreached 方法來進行載入新資料，使用renderfooter 來進行顯示狀態。

這樣嚴格的來說並不算上拉載入，只是滑動到底部自動進行載入。

首先在listview加入：

onendreached=
onendreachedthreshold=
renderfooter=

記得進行繫結

this._toend = this._toend.bind(this)
this._renderfooter = this._renderfooter.bind(this)

實現

_toend() 
_renderfooter() }>
正在載入更多...text>
view>
)}

let list = json.newslist
let swipers = 
let news = 
if (page == 1) 
news.splice(0, 0, swipers)
} else 
let newdata = this.state.data.concat(news)
this.setstate()

這裡的maxcount是為了方便管理的，定義為：

const maxcount = 20

請求的url改為 :

+ this.props.dic.nameen

+ '&startkey=3001_9223370543834829200_537d522d125e32ae&newkey=&index='

+ page

+ '&size='

+ maxcount

現在可以執行看看效果了。

我們會發現一開始在載入第一頁資料的時候footer也顯示了出來，我們需要控制它的顯示與隱藏，給state加入showfooter: false，在第一頁資料載入完成並且返回的陣列元素個數等於maxcount則賦值為true

this.setstate()

_renderfooter() 
return (
style=}>
正在載入更多text>
view>
)}

現在footer可以正確的顯示隱藏了，但是我們還需要狀態來改變footer顯示的文字，如果還有更多資料，那我們看見footer的時候它的狀態顯然是正在載入更多，如果沒有更多資料了，那我們就顯示已載入全部。

給state加入hasmore: true，我們先假設它還有更多

然後在請求到資料進行處理:

let hasmore = list.length == maxcount ? true : false
this.setstate()

然後處理renderfooter:

_renderfooter() 
return (
style=}>
text>
view>
)}

我們還需要再toend的判斷條件加入hasmore來避免顯示沒有更多資料的時候拉倒底部還會進行請求資料：

_toend()

到現在上下拉重新整理已經完成

這個上拉重新整理比較簡陋，你也可以放gif圖或者使用動畫來讓介面變好看點。

專案位址

React Native 五上下拉重新整理載入

上下拉電阻

上下拉電阻的作用

上下拉電阻的作用

React Native 五 上下拉重新整理載入

上下拉電阻

上 下拉電阻的作用

上下拉電阻的作用

相關推薦

React Native 五上下拉重新整理載入

上下拉電阻的作用