Detailed explanation of the case of adding top pull-down refresh and bottom click refresh in React native ListView on mobile terminal-JS Tutorial-php.cn

Detailed explanation of the case of adding top pull-down refresh and bottom click refresh in React native ListView on mobile terminal

php中世界最好的语言

Release： 2018-05-15 10:36:42

Original

1418 people have browsed it

This time I will bring you a detailed explanation of the case of adding top pull-down refresh and bottom click refresh in React native ListView on the mobile terminal. What are the precautions for adding top pull-down refresh and bottom click refresh in React native ListView on the mobile terminal? Here are Let’s take a look at practical cases.

1. Click refresh at the bottom

1.1 First add a button

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

Copy after login

Add a renderFooter method to ListView to draw the bottom element. Display a button inside.

Button processing logic:

addMoreOnFoot(){
 // alert(&#39;addMoreOnFoot&#39;)
 // console.log(&#39;addMoreOnFoot&#39;)
 const url = &#39;http://127.0.0.1/getFootContent?lastid=&#39; + this.state.footLastId + &#39;&count=20&isTop=0&#39;
 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][&#39;id&#39;],
    jsondata:rowData,
    data:new ListView.DataSource({rowHasChanged:(r1, r2) => r1 != r2}).cloneWithRows(rowData),
   })
   }
 })
 .catch((error)=>{
  alert(error);
 });
}

Copy after login

After clicking, network processing is performed, and the last id is also passed to the server, and the server returns the 20 records after this id. Then resetState.

2. Head pull-down refresh

Add RefeshControl in ListView

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

Copy after login

Load the latest header data and add it to this.State

reloadWordData(){
  // alert(this.state.topLastId)
  const url = &#39;http://127.0.0.1/getFootContent?lastid=&#39; + this.state.topLastId + &#39;&count=20&isTop=1&#39;
  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][&#39;id&#39;],
     jsondata:rowData,
     data:new ListView.DataSource({rowHasChanged:(r1, r2) => r1 != r2}).cloneWithRows(rowData),
    })
    }
  })
  .catch((error)=>{
   alert(error);
  });
 }

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!