列表视图行在项目之间留下额外的 space

Question

我正在尝试使用数据对象在 React-Native 上创建一个 Listview，如下所示：

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

如您所见，列表视图已正确呈现，但我希望该行使用列表视图行之间留下的空白。请看图片。在这种情况下，8.,11.,12。 13.th 项应移至顶部。

有人知道我该如何正确解决这个问题吗？

谢谢！

Answer 1

也许这对你有帮助Auto responsive grid layout library for ReactNative

列表视图行在项目之间留下额外的 space

Listview row leaves extra space between items

listview

jsx

react-native