反応したネイティブのリストビュー内のセクションの項目を1行に表示する方法は？

Question

thisチュートリアルに従うと、リストビューはreact-nativeになります。しかし、私は、特定のセクションの要素を別々の行に表示するのではなく、列方向に区切りたいと思っています。私はflexの方向を変えようとしましたが、できませんでした。私render機能で

、私が持っている：

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

私がしたいことは、すべてのことである次のように

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

listviewがあります表示される特定のセクションのButtons私はそれをすることができません。どのようにこのタスクを達成するには？

Answer 1

あなたが一緒に1行

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

にしたい項目を入れ子項目のリストを再構築し、

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