如何在列表视图中反应原生呈现单行中某一部分的项目？

Question

我正在关注this教程，其中包含react-native中的部分。不过，我希望我的特定部分的元素按列方式分隔，而不是将它们呈现在单独的行中。我试图改变flex的方向，但无法做到这一点。

在我render功能，我有：

return(
    <ListView 
     dataSource = {this.state.dataSource} 
     renderRow = {this.renderRow} 
     renderSectionHeader = {this.renderSectionHeader} 
     style={styles.listview} 
    /> 

listview如下：

listView: { 
    margin: 10, 
    flexDirection: 'row' 
    flexWrap: 'wrap' 
} 

和renderRow由下式给出：

return (
    <View> 
     <Button onPress={this._setModalVisible.bind(this,true)}> 
     <Image source={image} style={{width:50,height:60}}/> 
     </Button> 
    </View> 
); 

我要的是所有的要显示的特定部分的Buttons单排，但我无法做到。如何完成这项任务？

Answer 1

你可以调整你的项目筑巢你在一排一起

items = [ 
    item, item, item, [item, item, item] 
] 

想要的物品的清单，并做了renderRow功能的检查，以使它们在一次

renderRow(row){ 
    if(Array.isArray(row)){ 
     var _renderRow = this.renderRow; 
     return (
      <View style={{flexDirection: 'row'}}> 
       {row.map((item) => _renderRow(item))} 
      <View>); 
    }else{ 
     return (
      <View> 
       <Button onPress={this._setModalVisible.bind(this,true)}> 
       <Image source={image} style={{width:50,height:60}}/> 
       </Button> 
      </View> 
     ); 
    } 
}