这篇文章将为大家详细讲解有关React Native中ListView如何实现九宫格效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联主营诸城网站建设的网络公司,主营网站建设方案,成都APP应用开发,诸城h5重庆小程序开发搭建,诸城网站营销推广欢迎诸城等地区企业咨询
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确认网格数量
} />
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(); }, // 返回cell renderRow(rowData){ return( {AlertIOS.alert('点击了')}} > ); }, }); 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);{rowData.title}
效果如图(数据源自己加)
关于“React Native中ListView如何实现九宫格效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。