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

1.底部点击刷新1.1先增加一个按钮 render(){if(!this.state.data){return(<Text>Loading...</Text&g

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);
 });
 }

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

React native ListView 下拉刷新 React native ListView 点击刷新