用ListView实现九宫格布局

来源:互联网 发布:青少年暴力犯罪数据 编辑:程序博客网 时间:2024/05/22 03:32

相关技术点:
通常情况下,我们对ListView的操作是纵向的,如果是横向的,则需要设置ListView的contentContainerStyle属性,添加flexDirection:‘row’让多个ListView在同一行显示,而且通过flexWrap:’wrap’进行换行。

运行效果图:
这里写图片描述
代码如下:

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */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;// ES5var ListViewDemo2 = 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('ListViewDemo2', () => ListViewDemo2);
1 0
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 京东付款七天不发货怎么办 电动车电机锁钥匙丢了怎么办 电瓶车锁钥匙丢了怎么办 苹果平板ld忘了怎么办 平板版本太低6.0怎么办 ios平板版本太低怎么办 微信公众号重名怎么办 发票规格型号填错了怎么办 鲁大师检测硬盘有问题怎么办 英文成绩单翻译错了怎么办 川航订机票名字写错了怎么办 亚航电子登机牌没有保存怎么办 cfa考试准考证名字有错怎么办 火车票护照号错了怎么办 国际机票名字错一个字怎么办 国际机票名字拼音错了怎么办 订机票名字写错了怎么办 亚航机票护照号写错怎么办 打发过了的奶油怎么办? 孩子生了没人带怎么办 办理退休审核未通过怎么办 整天沉迷全民k歌怎么办 吃鸡账号被误封了怎么办 手机换号了银行卡怎么办 评副高没有病房论文怎么办 收件人姓名写错了怎么办 汇款姓名写错了怎么办 在菲律宾旅游签证过期怎么办 微博转发被限制怎么办 百香果蜂蜜沉在下面怎么办 领导要潜我老婆怎么办 被领导潜了该怎么办 实习期单位领导开除我我该怎么办 泡泡袖显手臂肥怎么办 客人想吃霸王餐怎么办 在四楼上课时发生地震怎么办 学生在上课时发生地震怎么办 学生上课时发生地震怎么办 老板承诺的工资不兑现怎么办 只有本科毕业证没有学位证怎么办 孩子跟坏孩子玩怎么办