1

このチュートリアルに従って、セクションを含むリストビューを作成しています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、特定のセクションのすべてを 1 行に表示することですが、それができません。このタスクを達成する方法は？

4

1 に答える 1

1

必要なアイテムを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>
        );
    }
}
于 2016-06-16T04:19:35.957 に答える