ListView implements the nine-square grid effect case

This article mainly introduces the example of implementing the nine-square grid effect in React Native's ListView. It has certain reference value. Interested friends can refer to it

Overview

In Android native development, ListView is a very commonly used list control, so how does React Native (RN) implement this function? Let’s take a look at the source code of ListView

ListView is extended based on ScrollView, so it has the related properties of ScrollView:

##dataSource: data Source, similar to the data collection we pass into BaseAdapter in Android.

renderRow: Render a certain row, similar to the getItem method in BaseAdapter.

onEndReached: Simply put, it is used for paging operations. In native development in Android, we need to implement the corresponding methods ourselves.

onEndReachedThreshold: The critical value before calling onEndReached, the unit is pixels.

refreshControl: Specify the RefreshControl component to provide pull-down refresh function for ScrollView. (This property is inherited from ScrollView)

renderHeader: Renders the head View, similar to addHeader in Android ListView.

The above properties can basically solve some common list requirements. If we want to achieve a grid effect, we can also use this component to achieve it, which is somewhat similar to the RecyclerView control in Android.

pageSize: The number of rendered grids, similar to numColumns in Android GridView.

contentContainerStyle: This property is inherited from ScrollView and mainly affects the content of the component. on the container.

To use ListView to achieve the effect of nine-square grid:

1, configure pageSize to confirm the number of grids

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

2, set the width style of each grid

##

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

3, set the corresponding attribute of contentContainerStyle

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

It needs to be explained here that since the default direction of ListView is vertical, you need to set the contentContainerStyle property of ListView and add flexDirection:'row'. Secondly, the ListView is displayed on the same line and automatically wrapped through flexWrap:'wrap' setting.

Note: flexWrap attributes: wrap, nowrap, wrap: automatic line wrapping when there is insufficient space, nowrap: insufficient space, compress the container, and will not automatically wrap.

The following is the complete code:

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

The effect is as shown (add the data source yourself)

The above is the detailed content of ListView implements the nine-square grid effect case. For more information, please follow other related articles on the PHP Chinese website!