如何在列表視圖中反應原生呈現單行中某一部分的項目？

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> 
     ); 
    } 
}