这次给大家带来
react
native listview在移动端中添加顶部下拉刷新与底部点击刷新案例详解，react native listview在移动端中添加顶部下拉刷新与底部点击刷新的注意事项有哪些，下面就是实战案例，一起来看一下。
1. 底部点击刷新
1.1 先增加一个
按钮
给ListView 增加一个renderFooter 方法来绘制底部元素。在里面显示一个按钮。
按钮处理逻辑：
点击后进行网络处理，把之前最后一条id也传给服务器，让服务器返回这个id后面的20条记录。然后重新setState即可。
2. 头部下拉刷新
ListView中增加RefeshControl
载入最新的头部数据添加到this.State中
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
React Native For Android 源码编译 中文WORD版
本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看
下载
layui动态与静态分页实现步骤详解
angular路由高亮之实现步骤详解
render() {
if(!this.state.data){
return(
Loading...
)
}else{
return(
)
}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);
});
}render() {
if(!this.state.data){
return(
Loading...
)
}else{
return(
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);
});
}