Question

我正在关注this教程，使用react-native中的部分制作Listview。但是我希望我的特定部分的元素以列方式分开，而不是在单独的行中呈现它们。我试图改变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>
        );
    }
}

如何在Listview中的一行中呈现一个部分的项目本地？

1 个答案: