Explication détaillée de l'utilisation de ListView-js tutoriel-php.cn

Explication détaillée de l'utilisation de ListView

巴扎黑

Libérer： 2017-08-06 15:39:58

original

3210 Les gens l'ont consulté

Cet article présente principalement l'utilisation de ReactNative ListView. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Venez jeter un œil avec l'éditeur

J'ai récemment appris ReactNative Cet article présente l'utilisation de ReactNative ListView. Partagez-le avec tout le monde et laissez une note pour vous-même

<.> ListView

Sous Android, si nous devons afficher un ListView, deux éléments sont indispensables Le premier est la source de données du ListView, et le second est le style de chaque élément du ListView. . Identique à ReactNative. Tout d'abord, regardons un exemple simple :

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

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

Copier après la connexion

Dans render(), nous rendons un ListView. Dans les propriétés de ListView, nous spécifions dataSource et renderRow , ceux-ci. deux propriétés représentent la source de données du ListView et chaque ligne rendue.

dataSource

Si nous voulons créer une source de données, le moyen le plus simple est de créer une source de données ListView.DataSource, puis de lui transmettre un tableau via cloneWithRows méthode.

La fonction rowHasChanged fournie à la source de données peut indiquer au ListView s'il doit redessiner une ligne de données, c'est-à-dire si les données ont changé, c'est-à-dire qu'elle sera jugée quand l'interface doit être redessiné Si la ligne de la page précédente est modifiée Si les données n'ont pas changé, elles ne seront pas redessinées, sinon elles seront redessinées.

Comme le montre le code ci-dessus, lorsque nous définissons les données sur la source de données, nous transmettons directement un tableau. Bien sûr, nous pouvons également utiliser une méthode pour obtenir les données et appeler la méthode lors de la configuration. données :

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

Copier après la connexion

L'obtention de données via des méthodes nous permet d'effectuer plus facilement certains traitements logiques.

renderRow

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

Copier après la connexion

Cet attribut doit être transmis dans une méthode, comme indiqué ci-dessus, il obtiendra les données de la source de données Accepte une donnée, ainsi que son ID et la section dans laquelle elle se trouve, et renvoie un composant rendu pour restituer cette ligne de données. Par défaut, les données du paramètre sont les données elles-mêmes. mis dans la source de données, mais il peut également être fourni certains convertisseurs.

Si une ligne est mise en surbrillance (en appelant la fonction highlightRow), le ListView sera averti en conséquence. Lorsqu'une ligne est mise en surbrillance, les lignes de séparation de chaque côté sont masquées. L'état en surbrillance d'une ligne peut être réinitialisé en appelant highlightRow(null).

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

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

Copier après la connexion

Étant donné que la méthode dans renderRow acceptera automatiquement une partie des données de la source de données, nous pouvons l'implémenter en appelant une méthode externe uniquement. devons transmettre les données que nous devons obtenir de la source de données dans les paramètres de la méthode externe, comme indiqué dans le code ci-dessus.

Lorsque nous devons implémenter une mise en page plus complexe, nous pouvons également importer des composants externes comme style de chaque ligne du ListView.

Par exemple, si nous personnalisons un composant Item_MyListView, nous devons l'importer dans le composant actuel via l'importation au début du fichier :

 import Item_MyListView from &#39;./Item_MyListView&#39;;

Copier après la connexion

Ensuite, vous pouvez utiliser directement le composant que nous avons importé via le nom importé :

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

Copier après la connexion

Cliquez sur ListView

Lorsque nous devons ajouter un événement de clic à chaque ligne du ListView, il nous suffit de l'envelopper avec une couche de TouchableOpacity ou TouchableHighlight et de définir la méthode onPress.

Le code suivant est affiché :

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

Copier après la connexion

Il convient de noter que lors de l'appel de _renderRow dans l'attribut renderRow de ListView, vous devez lier ceci, sinon, ceci dans onPress indiquera l'erreur, comme indiqué ci-dessous :

Copier le code Le code est le suivant :

Le code complet est le suivant :

import React,{
  View,
  Text,
  TouchableOpacity,
  ListView,
} from &#39;react-native&#39;;

import Item_MyListView from &#39;./Item_MyListView&#39;;

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

Copier après la connexion

Parmi eux, Item_MyListView définit simplement un composant à volonté. Il n'a aucune signification pratique et ne sera plus affiché.

L'effet final est le suivant :