列表视图排叶项

我试图让使用数据对象为以下上反应本地列表视图之间的额外空间：列表视图排叶项

const dataObjects = [ 
     {title: '1', description: 'First Description', type: 'key'}, 
     {title: '2', description: 'Second Description', type: 'key'}, 
     {title: '3', description: 'Third Description', type: 'key'}, 
     {title: '4', description: 'Fourth Description', type: 'key'}, 
     {title: '5', description: 'Fifth Description', type: 'key'}, 
     {title: '6', description: 'Sixth Description', type: 'key'}, 
     {title: '7', description: 'Seventh Description', type: 'toogle'}, 
     ... 
    ]

我的渲染方法：

let remoteTemplate; 
if (rowData.type == "key") { 
    remoteTemplate = (
    <TouchableOpacity style={styles.key} onPress={() => alert("sd")}> 
      <Text style={styles.basickey} >{rowData.title} - {rowData.description}</Text>     
     </TouchableOpacity>  
    ) 
    } else { 
     remoteTemplate = (
     <TouchableOpacity style={styles.key2} onPress={() => alert("sd")}> 
     <Text style={styles.toggle} >{rowData.title} - {rowData.description}</Text>    
     </TouchableOpacity>  
     )   
    }  
    return ( 
     remoteTemplate 
    )

而这些是我的款式：

const styles = StyleSheet.create({ 
container: { 
}, 
swiper: {  
    paddingTop: Metrics.navBarHeight, 
}, 
key: { 
    backgroundColor: '#9DD6EB', 
    width: (Metrics.screenWidth/4), 
    height: 60 
}, 
key2: { 
    backgroundColor: '#9DD6EB', 
    width: (Metrics.screenWidth/2), 
    height: 120 
}, 
basickey: { 
    textAlign: 'center', 
}, 
toggle: { 
    textAlign: 'center', 
}, 
keysWrapper: { 
    flex: 1, 
    flexDirection: 'row', 
    flexWrap: 'wrap', 
},  
text: { 
    textAlign: 'center', 
    backgroundColor: '#9DD6EB', 
    color: '#FFFFFF',  
}, 
});

Snapshot of current View

正如你所看到的，listview被正确渲染，但是我希望行使用列表视图行之间的空白。请参阅图片。在这种情况下，8.，11.，12。 13.项目应该转移到顶端。

任何人有任何想法我可以如何正确解决这个问题？

谢谢！

来源

2016-08-18 Arda Ilgaz