android - react-native - 如何在React Native的Listview中单行呈现部分的项目？

Question

我正在按照本教程制作一个包含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>
        );
    }
}