Question

我正在尝试使用dataobjects在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

如您所见，listview已正确呈现，但我希望该行使用listview行之间留下的空白区域。请看图像。在这种情况下，8,11,12。和第十三项应该转移到顶部。

任何人都知道如何才能妥善解决这个问题？

谢谢！

Answer 1

也许这可以帮助你Auto responsive grid layout library for ReactNative

Listview行在项之间留出额外的空间

1 个答案: