這次帶給大家怎麼使用React native ListView增加頂部下拉刷新和底下點擊刷新，使用React native ListView增加頂部下拉刷新和底下點擊刷新的注意事項有哪些，下面就是實戰案例，一起來看一下。
1. 底部點選刷新
1.1 先增加一個按鈕
##
render() {
if(!this.state.data){
return(
<Text>Loading... </Text>
)
}else{
return(
<ListView
refreshControl={
<RefreshControl
refreshing = {false}
onRefresh = {this.reloadWordData.bind(this)}
/>
}
dataSource={this.state.data}
renderRow={(rowData)=>this.renderRow(rowData)}
renderFooter={this.renderFooter.bind(this)}
>
</ListView>
);
}
}
renderFooter(){
return (
<View style={{marginVertical: 10, marginBottom:20}} >
<Button
onPress={this.addMoreOnFoot.bind(this)}
title="点击载入更多"
/>
</View>
)
}登入後複製
#給ListView 增加一個renderFooter 方法來繪製底部元素。在裡面顯示一個按鈕。
按鈕處理邏輯：
addMoreOnFoot(){
// alert('addMoreOnFoot')
// console.log('addMoreOnFoot')
const url = 'http://127.0.0.1/getFootContent?lastid=' + this.state.footLastId + '&count=20&isTop=0'
fetch(url)
.then((response)=>response.json())
.then((jsondata)=>{
if (jsondata.data && jsondata.data.length > 0){
const rowData = this.state.jsondata.concat(jsondata.data);
this.setState({
footLastId:jsondata.data[jsondata.data.length - 1]['id'],
jsondata:rowData,
data:new ListView.DataSource({rowHasChanged:(r1, r2) => r1 != r2}).cloneWithRows(rowData),
})
}
})
.catch((error)=>{
alert(error);
});
}登入後複製
點擊後進行網路處理，把之前最後一筆id也傳給伺服器，讓伺服器回傳這個id後面的20筆記錄。然後重新setState即可。
2. 頭部下拉刷新
ListView中增加RefeshControl
render() {
if(!this.state.data){
return(
<Text>Loading... </Text>
)
}else{
return(
<ListView
refreshControl={
<RefreshControl
refreshing = {false}
onRefresh = {this.reloadWordData.bind(this)}
/>
}
dataSource={this.state.data}
renderRow={(rowData)=>this.renderRow(rowData)}
renderFooter={this.renderFooter.bind(this)}
>
</ListView>
);
}
}登入後複製
載入最新的頭部資料加入this.State
reloadWordData(){
// alert(this.state.topLastId)
const url = 'http://127.0.0.1/getFootContent?lastid=' + this.state.topLastId + '&count=20&isTop=1'
fetch(url)
.then((response)=>response.json())
.then((jsondata)=>{
if (jsondata.data && jsondata.data.length > 0){
const rowData = jsondata.data.concat(this.state.jsondata);
this.setState({
topLastId:jsondata.data[0]['id'],
jsondata:rowData,
data:new ListView.DataSource({rowHasChanged:(r1, r2) => r1 != r2}).cloneWithRows(rowData),
})
}
})
.catch((error)=>{
alert(error);
});
}登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
如何使用vue.extend實作alert模態框彈出視窗元件
如何使用vue元件實作彈出框點選顯示隱藏
#
以上是如何使用React native ListView增加頂部下拉刷新和底下點擊刷新的詳細內容。更多資訊請關注PHP中文網其他相關文章！
