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