Ausführliche Erläuterung des Falles des Hinzufügens einer oberen Pulldown-Aktualisierung und einer unteren Klick-Aktualisierung in React Native ListView auf einem mobilen Endgerät

Dieses Mal werde ich Ihnen den Fall des Hinzufügens von Top-Pulldown-Aktualisierung und Bottom-Click-Aktualisierung in React Native ListView auf dem mobilen Endgerät ausführlich erläutern. Welche Vorsichtsmaßnahmen gibt es für das Hinzufügen von Top-Pulldown-Aktualisierung und Bottom-Click-Aktualisierung? In React native ListView auf dem mobilen Endgerät werfen wir einen Blick auf praktische Fälle.

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

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

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

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:

Detaillierte Erläuterung der Schritte zur Implementierung von dynamischem und statischem Paging in Laui

Detaillierte Erläuterung der Schritte zum Implementieren der Winkelrouting-Hervorhebung

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Falles des Hinzufügens einer oberen Pulldown-Aktualisierung und einer unteren Klick-Aktualisierung in React Native ListView auf einem mobilen Endgerät. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!