ListView(2)九宫格

React Native NineListView.gif

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
    Dimensions,
    Alert
} from 'react-native';

var shareData = require("./shareData.json");
var screenWidth = Dimensions.get('window').width;

var cols = 3;
var itemWH = 120;
var VMargin = (screenWidth - (itemWH * 3)) / (cols + 1);
var HMargin = 20;

export default class App extends Component<Props> {

    constructor(props) {
        super(props);
        // 创建数据源
        var ds = new ListView.DataSource({rowHasChanged: (r1: r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows(shareData.data)
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                    contentContainerStyle={styles.listViewStyle}
                />
            </View>
        );
    }

    /**
     * 单独的item
     * @param rowData
     */
    renderRow(rowData) {
        return (
            <TouchableOpacity
                activeOpacity={0.5}
                onPress={() => {Alert.alert("哈哈")}}>
                <View style={styles.itemStyle}>
                    <Image source={{uri: rowData.icon}} style={styles.iconStyle}/>
                    <Text>{rowData.title}</Text>
                </View>
            </TouchableOpacity>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    iconStyle: {
        width: 100,
        height: 100,
    },
    listViewStyle: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    itemStyle: {
        width: itemWH,
        height: itemWH,
        marginLeft:VMargin,
        marginTop:HMargin,
        alignItems:'center'
    }
});