本篇文章主要介绍了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);
效果如图（数据源自己加）
以上就是listview实现九宫格效果案例的详细内容。