使用listview的React-native创建pinterest风格

时间:2016-05-04 19:50:04

标签: listview react-native

我想用listview组件做一个等于pinterest的例子,但是位置卡在另一个之下并不精确。我做错了什么?

enter image description here

    //@flow

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


class CardItem extends Component {
    state: Object;
    constructor(props : Object) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
        var clone = ds.cloneWithRows(data);
        this.state = {
            dataSource: ds.cloneWithRows(data);
        };
    }

    getH():number{
        return Math.floor((Math.random() * 5) + 1) * 100;
    }

    render(){
        return (
            <ListView contentContainerStyle={styles.list}
                dataSource={this.state.dataSource}
                renderRow={(rowData) => <Text style={[styles.item, {height: this.getH()}]}>{rowData}</Text>}
                />
        )
    }
}

var styles = StyleSheet.create({
    list: {
        justifyContent: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap',

    },
    item: {
        backgroundColor: 'grey',
        margin: 3,
        width: 170
    }
});

export default CardItem;

是我的代码,cardview相当于pintrest请帮助我。

0 个答案:

没有答案