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

请求页面 默认页 https://www.jb51.net/article/139044.htm


【标题】：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>
React%20native%20ListView%20%E5%A2%9E%E5%8A%A0%E9%A1%B6%E9%83%A8%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E5%92%8C%E5%BA%95%E4%B8%8B%E7%82%B9%E5%87%BB%E5%88%B7%E6%96%B0%E7%A4%BA%E4%BE%8B
   );
  }
}


载入最新的头部数据添加到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组件中NavigatorIOS和ListView结合使用的方法 react-native ListView下拉刷新上拉加载实现代码 React Native之ListView实现九宫格效果的示例 ReactNative列表ListView的用法 React-Native实现ListView组件之上拉刷新实例（iOS和Android通用）

- React%20native%20ListView%20%E5%A2%9E%E5%8A%A0%E9%A1%B6%E9%83%A8%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E5%92%8C%E5%BA%95%E4%B8%8B%E7%82%B9%E5%87%BB%E5%88%B7%E6%96%B0%E7%A4%BA%E4%BE%8B

测试足球平台出租环境调试app
js缓存足球平台出租加载到app