Detaillierte Erläuterung der ListView-Nutzung

In diesem Artikel wird hauptsächlich die Verwendung von ReactNative ListView vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Kommen Sie und schauen Sie sich den Editor an

Ich habe kürzlich die Verwendung von ReactNative ListView kennengelernt. Teilen Sie es mit allen und hinterlassen Sie eine Notiz für sich selbst

ListView

Wenn wir in Android eine ListView anzeigen müssen, sind zwei Elemente unverzichtbar. Das erste ist die Datenquelle der ListView und das zweite ist der Stil jedes Elements in der ListView . Dasselbe wie in ReactNative. Schauen wir uns zunächst ein einfaches Beispiel an:

  constructor(props) {
   super(props);
   var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
   this.state = {
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
   };
  },

  render() {
   return (
    <ListView
     dataSource={this.state.dataSource}
     renderRow={(rowData) => <Text>{rowData}</Text>}
    />
   );
  },

In render() rendern wir eine ListView. In den Eigenschaften von ListView geben wir dataSource und renderRow an Zwei Eigenschaften stellen die Datenquelle der ListView und jede gerenderte Zeile dar.

dataSource

Wenn wir eine Datenquelle erstellen möchten, besteht die einfachste Möglichkeit darin, eine ListView.DataSource-Datenquelle zu erstellen und ihr dann ein Array über cloneWithRows zu übergeben Verfahren.

Die der Datenquelle bereitgestellte rowHasChanged-Funktion kann ListView mitteilen, ob eine Datenzeile neu gezeichnet werden muss, dh ob sich die Daten geändert haben, d. h. es wird beurteilt, wann die Schnittstelle geändert werden muss neu gezeichnet. Wenn die Zeile auf der vorherigen Seite geändert wird. Wenn sich die Daten nicht geändert haben, werden sie nicht neu gezeichnet, andernfalls wird sie neu gezeichnet.

Wie im obigen Code gezeigt, übergeben wir beim Festlegen der Daten direkt ein Array. Natürlich können wir auch eine Methode verwenden, um die Daten abzurufen, und die Methode beim Festlegen aufrufen Daten:

  constructor(props){
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(this._genRows()),
    };
  }

  _genRows(){
    const dataBlob = [];
    for(let i = 0 ; i< 200 ; i ++ ){
      dataBlob.push("aa"+i);
    }
    return dataBlob;
  }

Das Erhalten von Daten durch Methoden erleichtert uns die Durchführung einiger logischer Verarbeitungen.

renderRow

(rowData, sectionID, rowID, highlightRow) => renderable

Dieses Attribut muss in einer Methode übergeben werden, die wie oben gezeigt erhalten wird Die Daten aus der Datenquelle. Akzeptiert ein Datenelement sowie dessen ID und den Abschnitt, in dem es sich befindet, und gibt eine renderbare Komponente zum Rendern dieser Datenzeile zurück. Standardmäßig sind die Daten im Parameter die Daten selbst in die Datenquelle eingefügt werden, es können aber auch einige Konverter bereitgestellt werden.

Wenn eine Zeile hervorgehoben wird (durch Aufruf der Funktion „highlightRow“), wird die ListView entsprechend benachrichtigt. Wenn eine Zeile hervorgehoben ist, werden die Trennlinien auf beiden Seiten ausgeblendet. Der hervorgehobene Status einer Zeile kann durch den Aufruf von highlightsRow(null) zurückgesetzt werden.

  _renderRow(rowData, sectionID, rowID){
    return (
        <View>
          <Text>{"rowData:"+rowData+"  rowId:"+rowID}</Text>
        </View>
      );
  }

  render() {
   return (
    <ListView
     dataSource={this.state.dataSource}
     renderRow={this._renderRow}
    />
   );
  },

Da die Methode in renderRow automatisch ein Datenelement aus der Datenquelle akzeptiert, können wir es nur durch Aufrufen einer externen Methode implementieren Wir müssen die Daten, die wir von der Datenquelle erhalten müssen, in den Parametern der externen Methode übergeben, wie im obigen Code gezeigt.

Wenn wir ein komplexeres Layout implementieren müssen, können wir auch externe Komponenten als Stil jeder Zeile der ListView importieren.

Wenn wir beispielsweise eine Komponente Item_MyListView anpassen, müssen wir sie durch Import am Anfang der Datei in die aktuelle Komponente importieren:

 import Item_MyListView from './Item_MyListView';

Dann können Sie die Komponente, die wir über den importierten Namen importiert haben, direkt verwenden:

  _renderRow(rowData, sectionID, rowID){
    return (
      <TouchableOpacity onPress={this._pressRow}>
        <View>
          <Text>{"rowData:"+rowData+"  rowId:"+rowID}</Text>
          <Item_MyListView></Item_MyListView>
        </View>
      </TouchableOpacity>
      );
  }

Klicken Sie auf ListView

Wenn wir jeder Zeile der ListView ein Klickereignis hinzufügen müssen, müssen wir es nur mit einer Ebene von TouchableOpacity oder TouchableHighlight umschließen und die onPress-Methode definieren.

Der folgende Code wird angezeigt:

  _pressRow(rowID){
    alert("hellow"+rowID);
  }

  _renderRow(rowData, sectionID, rowID){
    return (
      <TouchableOpacity onPress={()=>this._pressRow(rowID)}>
        <View>
          <Text>{"rowData:"+rowData+"  rowId:"+rowID}</Text>
          <Item_MyListView info={rowData}></Item_MyListView>
        </View>
      </TouchableOpacity>
      );
  }

Es ist zu beachten, dass Sie dies binden müssen, wenn Sie _renderRow im renderRow-Attribut von ListView aufrufen. Andernfalls weist This in onPress auf den Fehler hin, wie unten gezeigt:

Code kopieren Der Code lautet wie folgt:

Der vollständige Code lautet wie folgt:

import React,{
  View,
  Text,
  TouchableOpacity,
  ListView,
} from 'react-native';

import Item_MyListView from './Item_MyListView';

export default class SecondPageComponent extends React.Component{

  constructor(props){
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(this._genRows()),
    };


  }

  _genRows(){
    const dataBlob = [];
    for(let i = 0 ; i< 200 ; i ++ ){
      dataBlob.push("aa"+i);
    }
    return dataBlob;
  }

  _pressRow(rowID){
    alert("hellow"+rowID);
  }

  _renderRow(rowData, sectionID, rowID){
    return (
      <TouchableOpacity onPress={()=>this._pressRow(rowID)}>
        <View>
        <Text>{"rowData:"+rowData+"  rowId:"+rowID}</Text>
        <Item_MyListView info={rowData}></Item_MyListView>
        </View>
      </TouchableOpacity>
      );
  }


  render(){
    return (
      <View style={{flex:1,}}>
        <ListView dataSource={this.state.dataSource} renderRow={this._renderRow.bind(this)}/>
      </View>
      );
  }
}

Unter diesen definiert Item_MyListView einfach eine Komponente nach Belieben. Sie hat keine praktische Bedeutung und wird nicht erneut angezeigt.

Der Endeffekt ist wie folgt:

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der ListView-Nutzung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!