React Native - SectionList numColumns 支持 [英] React Native - SectionList numColumns support

问题描述

FlatList 有 numColumns支持.如何使用 SectionList 设置 numColumns?

FlatList has numColumns support. How to set numColumns with SectionList?

Github 问题:SectionList renderItem 多项目支持 #13192

推荐答案

这是我对 SectionList 的 numColumns 的解决方案.如果你有更好的方式请告诉我.

Here is my solution to numColumns for SectionList. If you have better let me know please.

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

这篇关于React Native - SectionList numColumns 支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！