So verwenden Sie die native ListView von React, um eine Aktualisierung im oberen Pulldown-Menü und eine Aktualisierung per Klick im unteren Bereich hinzuzufügen-js-Tutorial-php.cn

So verwenden Sie die native ListView von React, um eine Aktualisierung im oberen Pulldown-Menü und eine Aktualisierung per Klick im unteren Bereich hinzuzufügen

php中世界最好的语言

Freigeben： 2018-06-01 17:29:23

Original

1522 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie mit React Native ListView eine obere Pulldown-Aktualisierung und einen unteren Klick zum Aktualisieren hinzufügen. Was sind Was ist zu beachten? Hier ist der eigentliche Kampf.

1. Klicken Sie unten auf „Aktualisieren“

1.1 Fügen Sie zunächst eine -Schaltfläche hinzu

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

Nach dem Login kopieren

Fügen Sie ListView eine renderFooter-Methode hinzu, um das untere Element zu zeichnen. Zeigen Sie darin eine Schaltfläche an.

Schaltflächenverarbeitungslogik:

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

Nach dem Login kopieren

Nach dem Klicken wird die Netzwerkverarbeitung durchgeführt und die letzte ID wird ebenfalls an den Server übergeben, und der Server gibt die 20 Datensätze nach dieser ID zurück. Dann resetState.

2. Head-Dropdown-Aktualisierung

ReshControl in ListView hinzufügen

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

Nach dem Login kopieren

Laden Sie die neuesten Header-Daten und fügen Sie sie zu this.State hinzu

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

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie vue.extend, um die Popup-Komponente für die modale Alarmbox zu implementieren

Anleitung Popup-Fenster „Vue-Komponente verwenden“ zum Implementieren anklicken, um

anzuzeigen und auszublenden

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die native ListView von React, um eine Aktualisierung im oberen Pulldown-Menü und eine Aktualisierung per Klick im unteren Bereich hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!