React native ListView 增加顶部下拉刷新和底下点击刷新示例

1. 底部点击刷新

1.1 先增加一个按钮

rush:js;"> render() { if(!this.state.data){ return( Loading... ) }else{ return( } dataSource={this.state.data} renderRow={(rowData)=>this.renderRow(rowData)} renderFooter={this.renderFooter.bind(this)} >

);
}
}

renderFooter(){
return (
<View style={{marginVertical: 10,marginBottom:20}} >
<Button
onPress={this.addMoreOnFoot.bind(this)}
title="点击载入更多"
/>

) }

给ListView 增加一个renderFooter 方法来绘制底部元素。在里面显示一个按钮。

按钮处理逻辑：

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

rush:js;"> render() { if(!this.state.data){ return( Loading... ) }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中

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'],}) } }) .catch((error)=>{ alert(error); }); }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。