React Native之ListView实现九宫格效果的示例

概述

在安卓原生开发中，listview是很常用的一个列表控件，那么react native（rn）如何实现该功能呢？我们来看一下listview的源码

listview是基于scrollview扩展得来的，所以具有scrollview的相关属性：

datasource：数据源，类似于安卓中我们传入baseadapter的数据集合。

renderrow：渲染某一行，类似于baseadapter中的getitem方法。

onendreached：简单说就是用于分页操作，在安卓中原生开发中，我们需要自己实现相应的方法。

onendreachedthreshold：调用onendreached之前的临界值，单位是像素。

refreshcontrol：指定refreshcontrol组件，用于为scrollview提供下拉刷新功能。(该属性是继承与scrollview)

renderheader：渲染头部view，类似于安卓listview中的addheader.

以上的属性基本可以解决一些常见的列表需求，如果我们想要实现网格的效果，也可以借助该组件来实现，有点类似于安卓中的recyclerview控件。

pagesize:渲染的网格数，类似于安卓gridview中的numcolumns.

contentcontainerstyle:该属性是继承于scrollview，主要作用于该组件的内容容器上。

要用listview实现九宫格的效果：

1，配置pagesize确认网格数量

<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={['#ff0000', '#00ff00', '#0000ff']}  
      enabled={true}  
      />  
    }  
   />  

2，设置每一个网格的宽度样式

itemlayout:{  
  flex:1,  
  width:util.size.width/3,  
  height:util.size.width/3,  
  alignitems:'center',  
  justifycontent:'center',  
  borderwidth: util.pixel,  
  bordercolor: '#eaeaea'  
 },  

3，设置contentcontainerstyle相应属性

grid: {  
  justifycontent: 'space-around',  
  flexdirection: 'row',  
  flexwrap: 'wrap'  
 },  

这里需要说明下，由于listview的默认方向是纵向的，所以需要设置listview的contentcontainerstyle属性，添加flexdirection:‘row'。其次，listview在同一行显示，而且通过flexwrap:'wrap'设置自动换行。

注：flexwrap属性：wrap、nowrap，wrap：空间不足的情况下自动换行，nowrap:空间不足，压缩容器，不会自动换行。

以下是完整代码：

 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('点击了')}} > 
        <view style={styles.innerviewstyle}> 
          <image source={{uri:rowdata.icon}} style={styles.iconstyle} /> 
          <text>{rowdata.title}</text> 
        </view> 
      </touchableopacity> 
    ); 
  }, 
}); 
 
const styles = stylesheet.create({ 
  listviewstyle:{ 
    // 主轴方向 
    flexdirection:'row', 
    // 一行显示不下,换一行 
    flexwrap:'wrap', 
    // 侧轴方向 
    alignitems:'center', // 必须设置,否则换行不起作用 
  }, 
 
  innerviewstyle:{ 
    width:cellwh, 
    height:cellwh, 
    marginleft:vmargin, 
    margintop:hmargin, 
    // 文字内容居中对齐 
    alignitems:'center' 
  }, 
 
  iconstyle:{ 
    width:80, 
    height:80, 
  }, 
 
}); 
 
appregistry.registercomponent('listviewdemo', () => listviewdemo); 

效果如图（数据源自己加）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。