使用listview创建pinterest样式进行本机反应

我想使用listview组件制作一个与pinterest相同的示例，但另一个组件下的位置卡并不精确。我做错了什么

代码

/@flow
从“React native”导入React，{View，Text，Component，ListView，StyleSheet}；
类扩展组件{
国家：对象；
构造函数（道具：对象）{
超级（道具）；
var ds=新的ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
var数据=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]；
var clone=ds.cloneWithRows（数据）；
此.state={
数据源：ds.cloneWithRows（数据）；
};
}
getH（）：数字{
返回Math.floor（（Math.random（）*5）+1）*100；
}
render（）{
返回(
{rowData}}
/>
)
}
}
var styles=StyleSheet.create({
名单：{
为内容辩护：“中心”，
flexDirection:'行'，
flexWrap:“wrap”，
},
项目：{
背景颜色：“灰色”，
差额：3，
宽度：170
}
});
导出默认项；

我的代码cardview是否等于pintrest请帮助我

    //@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;