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

react-native