ListView implémente le cas de l'effet de grille à neuf carrés-js tutoriel-php.cn

ListView implémente le cas de l'effet de grille à neuf carrés

巴扎黑

Libérer： 2017-08-06 15:08:51

original

1218 Les gens l'ont consulté

Cet article présente principalement l'exemple d'implémentation de l'effet de grille à neuf carrés dans ListView de React Native. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Aperçu
<.>

Dans le développement natif Android, ListView est un contrôle de liste très couramment utilisé, alors comment React Native (RN) implémente-t-il cette fonction ? Jetons un coup d'œil au code source de ListView

ListView est étendu en fonction de ScrollView, il possède donc les propriétés associées de ScrollView :

dataSource : source de données, similaire à la collecte de données que nous transmettons à BaseAdapter sous Android.

renderRow : affiche une certaine ligne, similaire à la méthode getItem dans BaseAdapter.

onEndReached : en termes simples, il est utilisé pour les opérations de pagination. Dans le développement natif sous Android, nous devons implémenter nous-mêmes les méthodes correspondantes.

onEndReachedThreshold : La valeur critique avant d'appeler onEndReached, en pixels.

refreshControl : spécifiez le composant RefreshControl pour fournir une fonction d'actualisation déroulante pour ScrollView. (Cet attribut est hérité de ScrollView)

renderHeader : rend la vue principale, similaire à addHeader dans Android ListView

Les attributs ci-dessus peuvent essentiellement résoudre certaines exigences de liste courantes. Si nous voulons obtenir un effet de grille, nous pouvons également utiliser ce composant pour y parvenir, ce qui est quelque peu similaire au contrôle RecyclerView sous Android.

pageSize : le nombre de grilles rendues, similaire à numColumns dans Android GridView

contentContainerStyle : cette propriété est héritée de ScrollView et affecte principalement le contenu du composant. sur le conteneur.

Pour utiliser ListView pour obtenir l'effet d'une grille à neuf carrés :

1, configurez pageSize pour confirmer le nombre de grilles

<ListView  
   automaticallyAdjustContentInsets={false}  
   contentContainerStyle={styles.grid}  
   dataSource={this.state.dataSource}  
   renderRow={this.renderRow.bind(this)}  
   pageSize={3}  
   refreshControl={  
     <RefreshControl  
      onRefresh={this.onRefresh.bind(this)}  
      refreshing={this.state.isLoading}  
      colors={[&#39;#ff0000&#39;, &#39;#00ff00&#39;, &#39;#0000ff&#39;]}  
      enabled={true}  
      />  
    }  
   />

Copier après la connexion

2. Définissez le style de largeur de chaque grille

itemLayout:{  
  flex:1,  
  width:Util.size.width/3,  
  height:Util.size.width/3,  
  alignItems:&#39;center&#39;,  
  justifyContent:&#39;center&#39;,  
  borderWidth: Util.pixel,  
  borderColor: &#39;#eaeaea&#39;  
 },

Copier après la connexion

3. Définissez l'attribut correspondant de contentContainerStyle.

grid: {  
  justifyContent: &#39;space-around&#39;,  
  flexDirection: &#39;row&#39;,  
  flexWrap: &#39;wrap&#39;  
 },

Copier après la connexion

Il faut expliquer ici que puisque la direction par défaut de ListView est verticale, vous devez définir l'attribut contentContainerStyle de ListView et ajouter flexDirection:'row' . Deuxièmement, le ListView est affiché sur la même ligne et automatiquement enveloppé via le paramètre flexWrap:'wrap'.

Remarque : attributs flexWrap : wrap, nowrap, wrap : retour à la ligne automatique lorsqu'il n'y a pas suffisamment d'espace, nowrap : espace insuffisant, compresse le conteneur et ne s'enroulera pas automatiquement.

Ce qui suit est le code complet :

 import React, { Component } from &#39;react&#39;; 
import { 
  AppRegistry, 
  StyleSheet, 
  Text, 
  View, 
  ListView, 
  Image, 
  TouchableOpacity, // 不透明触摸 
  AlertIOS 
} from &#39;react-native&#39;; 
 
// 获取屏幕宽度 
var Dimensions = require(&#39;Dimensions&#39;); 
const screenW = Dimensions.get(&#39;window&#39;).width; 
 
// 导入json数据 
var shareData = require(&#39;./shareData.json&#39;); 
 
// 一些常亮设置 
const cols = 3; 
const cellWH = 100; 
const vMargin = (screenW - cellWH * cols) / (cols + 1); 
const hMargin = 25; 
 
// ES5 
var ListViewDemo = React.createClass({ 
  // 初始化状态值(可以变化) 
  getInitialState(){ 
    // 创建数据源 
    var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2}); 
    return{ 
      dataSource:ds.cloneWithRows(shareData.data) 
    } 
  }, 
 
  render(){ 
    return( 
      <ListView 
        dataSource={this.state.dataSource} 
        renderRow={this.renderRow} 
        contentContainerStyle={styles.listViewStyle} 
      /> 
    ); 
  }, 
 
  // 返回cell 
  renderRow(rowData){ 
    return( 
      <TouchableOpacity activeOpacity={0.8} onPress={()=>{AlertIOS.alert(&#39;点击了&#39;)}} > 
        <View style={styles.innerViewStyle}> 
          <Image source={{uri:rowData.icon}} style={styles.iconStyle} /> 
          <Text>{rowData.title}</Text> 
        </View> 
      </TouchableOpacity> 
    ); 
  }, 
}); 
 
const styles = StyleSheet.create({ 
  listViewStyle:{ 
    // 主轴方向 
    flexDirection:&#39;row&#39;, 
    // 一行显示不下,换一行 
    flexWrap:&#39;wrap&#39;, 
    // 侧轴方向 
    alignItems:&#39;center&#39;, // 必须设置,否则换行不起作用 
  }, 
 
  innerViewStyle:{ 
    width:cellWH, 
    height:cellWH, 
    marginLeft:vMargin, 
    marginTop:hMargin, 
    // 文字内容居中对齐 
    alignItems:&#39;center&#39; 
  }, 
 
  iconStyle:{ 
    width:80, 
    height:80, 
  }, 
 
}); 
 
AppRegistry.registerComponent(&#39;ListViewDemo&#39;, () => ListViewDemo);

Copier après la connexion

L'effet est tel qu'indiqué (ajoutez la source de données vous-même)