web-dev-qa-db-ja.com

Reactネイティブ-SectionList numColumnsサポート

FlatList はnumColumnsをサポートしています。 SectionList でnumColumnsを設定する方法

Githubの問題： SectionList renderItem multi item support＃13192

react-nativereact-native-flatlist
11
Pir Shukarullah Shah

SectionListのnumColumnsに対する私の解決策は次のとおりです。よろしければお知らせください。

class Example extends Component {
  static propTypes = {
    numColumns: PropTypes.number
  };

  static defaultProps = {
    numColumns: 2
  };

  _renderSection = data => <Section {...data} />;

  _renderItem = ({ section, index }) => {
    const { numColumns } = this.props;

    if (index % numColumns !== 0) return null;

    const items = [];

    for (let i = index; i < index + numColumns; i++) {
      if (i >= section.data.length) {
        break;
      }

      items.Push(<Item item={section.data[i]} />);
    }

    return (
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between"
        }}
      >
        {items}
      </View>
    );
  };

  render() {
    return (
      <SectionList
        sections={dumyData}
        style={styles.container}
        renderItem={this._renderItem}
        renderSectionHeader={this._renderSection}
      />
    );
  }
}
20
Pir Shukarullah Shah

SectionListのrenderItemとしてnumColumnsプロパティを持つFlatListを使用することが可能です。

const data = [ //Notice [[...]] instead of [...] as in the RN docs
    {data: [[...]], title: ...},
    {data: [[...]], title: ...},
    {data: [[...]], title: ...},
]

render () {
    return (
        <SectionList
            renderItem={this._renderSectionListItem}
            renderSectionHeader={this._renderSectionHeader}
            sections={data}
        />
    )
}

renderSectionListItem = ({item}) => {
    return (
        <FlatList
            data={item}
            numColumns={3}
            renderItem={this.renderItem}
        />
    )
}
4
Justin Lok

この問題を掘り下げて、私はPir Shukarullah Shahのような解決策を思いつきました。

<SectionList/>'s renderItemメソッドの最初のアイテムのみを考慮して、通常のアイテムの代わりにFlatListを使用しています。

 _renderList = ({ section, index }) => {
    if (index !== 0) return null;

    return (
      <FlatList numColumns={columns}
        columnWrapperStyle={styles.container}
        data={section.data}
        renderItem={this._renderItem}
        keyExtractor={keyExtractor}
      />
    )
  }



...
      <SectionList
        renderItem={this._renderList}
        renderSectionHeader={this._renderSectionHeader}
        sections={itemList}
        keyExtractor={keyExtractor}
      />
2
kriskate