前端之家收集整理的这篇文章主要介绍了
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确认网格数量
}
/>
// 获取屏幕宽度
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('点击了')}} >
{rowData.title}
);
},});
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);
