ListView implementiert den Fall des Neun-Quadrat-Rastereffekts

Dieser Artikel stellt hauptsächlich das Beispiel der Implementierung des Neun-Quadrat-Rastereffekts in React Natives ListView vor. Interessierte Freunde können sich auf

Übersicht
beziehen 🎜>

In der nativen Android-Entwicklung ist ListView ein sehr häufig verwendetes Listensteuerelement. Wie implementiert React Native (RN) diese Funktion? Werfen wir einen Blick auf den Quellcode von ListView

ListView wurde basierend auf ScrollView erweitert und verfügt daher über die verwandten Eigenschaften von ScrollView:

dataSource: Datenquelle, ähnlich der Datensammlung, die wir in Android an BaseAdapter übergeben.

renderRow: Rendern einer bestimmten Zeile, ähnlich der getItem-Methode in BaseAdapter.

onEndReached: Einfach ausgedrückt wird es für Paging-Vorgänge verwendet. Bei der nativen Entwicklung in Android müssen wir die entsprechenden Methoden selbst implementieren.

onEndReachedThreshold: Der kritische Wert vor dem Aufruf von onEndReached, die Einheit ist Pixel.

refreshControl: Geben Sie die RefreshControl-Komponente an, um eine Pulldown-Aktualisierungsfunktion für ScrollView bereitzustellen. (Dieses Attribut wird von ScrollView geerbt)

renderHeader: Rendert die Kopfansicht, ähnlich wie addHeader in Android ListView Wenn Sie einen Rastereffekt erzielen möchten, können Sie ihn auch mit dieser Komponente erreichen, die dem RecyclerView-Steuerelement in Android etwas ähnelt.

pageSize: Die Anzahl der gerenderten Raster, ähnlich wie numColumns in Android GridView.

contentContainerStyle: Diese Eigenschaft wird von ScrollView geerbt und wirkt sich hauptsächlich auf den Inhalt der Komponente aus. auf dem Behälter.

Um ListView zu verwenden, um den Effekt eines Neunquadratrasters zu erzielen:

1, konfigurieren Sie pageSize, um die Anzahl der Raster zu bestätigen

2. Legen Sie den Breitenstil jedes Rasters fest

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

3. Legen Sie das entsprechende Attribut von contentContainerStyle fest

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

Hier muss erklärt werden, dass Sie die contentContainerStyle-Eigenschaft von ListView festlegen und flexDirection:'row' hinzufügen müssen, da die Standardrichtung von ListView vertikal ist. . Zweitens wird die ListView in derselben Zeile angezeigt und durch die Einstellung „flexWrap:‘wrap‘“ automatisch umbrochen.

grid: {  
  justifyContent: 'space-around',  
  flexDirection: 'row',  
  flexWrap: 'wrap'  
 },

Hinweis: FlexWrap-Attribute: Wrap, Nowrap, Wrap: automatischer Zeilenumbruch, wenn nicht genügend Platz vorhanden ist, Nowrap: nicht genügend Platz, komprimiert den Container und wird nicht automatisch umgebrochen.

Das Folgende ist der vollständige Code:

Der Effekt ist wie gezeigt (fügen Sie die Datenquelle selbst hinzu)

 import React, { Component } from 'react'; 
import { 
  AppRegistry, 
  StyleSheet, 
  Text, 
  View, 
  ListView, 
  Image, 
  TouchableOpacity, // 不透明触摸 
  AlertIOS 
} from 'react-native'; 
 
// 获取屏幕宽度 
var Dimensions = require('Dimensions'); 
const screenW = Dimensions.get('window').width; 
 
// 导入json数据 
var shareData = require('./shareData.json'); 
 
// 一些常亮设置 
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);

Das obige ist der detaillierte Inhalt vonListView implementiert den Fall des Neun-Quadrat-Rastereffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!