ListView строка оставляет дополнительное пространство между элементами

Question

я пытаюсь сделать Listview на React-Native использованием DataObjects в следующем:

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.th вещи должны перенести в начало.

У кого-нибудь есть идеи, как я могу решить это правильно?

Спасибо!

Answer 1

Возможно, это может вам помочь Auto responsive grid layout library for ReactNative