ReactNative——UI4.ListView 实现9九宫格

使用ListView 简单实现九宫格效果：

/**
 *
 * ListView 实现 九宫格 效果
 * */

import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
    ListView,
    TouchableOpacity,
    Alert,
} from 'react-native';
import ImageHotData from '../data/imageHotData.json';

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

var cols = 3;
var cellWH = width/4;
var hMargin = (width - cols * cellWH) / (cols + 1);
var vMargin = 25;
export default class ListView9Square extends Component {

    constructor(props) {
        super(props)

        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {

            DS: ds.cloneWithRows(ImageHotData.data),
        };
        console.log(this.state.DS);
    }

    static defaultProps = {
        //三列展示

    }

    render() {
        return (

            <ListView
                dataSource={this.state.DS}
                renderRow={this.renderRow}
                contentContainerStyle={styles.listViewStyle}/>

        );
    }

    //单独的Cell
    renderRow(rowData) {
        return (
            <TouchableOpacity activeOpacity={0.5}
                              onPress={() => Alert.alert(
                                  'Alert Title',
                                  rowData.title,
                                  [
                                      {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
                                      {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                                      {text: 'OK', onPress: () => console.log('OK Pressed')},
                                  ],
                                  {cancelable: false}
                              )}>
                <View style={styles.innerViewStyle}>
                    <Image source={{uri: rowData.img}} style={styles.iconStyle}></Image>
                    <Text>{rowData.title}</Text>
                </View>
            </TouchableOpacity>


        );
    }
}
const styles = StyleSheet.create({
    listViewStyle: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'center',
    },
    iconStyle: {

        width: cellWH,
        height: cellWH,
    },
    innerViewStyle: {

        width: cellWH,
        height: cellWH+20,
        marginLeft: hMargin,
        marginTop: vMargin,

        alignItems: 'center'
    },
});

不论大神还是新手，欢迎加QQ群一起讨论问题学习技术：230274309