React Native中ListView做九宫格

/ 0评 / 0

之前只是使用View来做的九宫格,都实现了,为啥还要使用ListView来做呢?就像iOS中的 table 一样,优化的好呀,做起来也更方便,哈,废话不多说,来看看代码

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    TouchableOpacity, //不透明度触摸
    AlertIOS
} from 'react-native';

//导入json数据
var shareData = require('./shareData.json');

var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
var screenWidth = Dimensions.get('window').width;

//一些常量设置
var cols = 3;
var cellWH = 100;

var vMargin = (screenWidth - cellWH * cols) / (cols + 1);
var hMargin = 25;

var listViewNine = React.createClass({//类名一定要大写开头
    //设置默认值(固定值,上下级界面数据的顺传)
    getDefaultProps() {

    },

    //设置一些初始值(可以变化的)
    getInitialState() {
        //创建数据源
        var ds = new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2});
        return {
            dataSource: ds.cloneWithRows(shareData.data)
        }
    },

    //渲染页面
    render(){
        return(
            
        )
    },

    //单独的cell
    renderRow(rowData, sectionTD, rowID, highlightRow){
        return(
            {AlertIOS.alert('哈哈')}}>
                
                    
                     {rowData.title} 
                
            
        )
    }

})


const styles = StyleSheet.create({
    listViewStyle:{
        //    改变主轴的防线
        flexDirection:'row',
        //    多行显示
        flexWrap:'wrap',
        alignItems: 'flex-start'
    },
    innerViewStyle:{
        width:cellWH,
        height:cellWH,
        marginLeft:vMargin,
        marginTop:hMargin,

        //    居中
        alignItems:'center',
        justifyContent:'center',
    },
    iconStyle:{
        width:80,
        height:80
    },
    titleStyle:{
        marginTop:5,
        fontSize:15
    }
});

//输出类
module.exports = listViewNine;

这个地方有一个坑,只设置属性flexWrap为wrap不起作用,找了半天才发现,由于在rn 0.28之后的版本上官方已经修改了flexWrap:'wrap'的工作方式了,之前版本的是flexWrap:'wrap'和默认的alignItems: 'stretch'是一起工作的;如果是0.28之后的版本,你需要加上alignItems: 'flex-start' ,这样就OK了,来看效果

评论已关闭。