React Native - SectionList numColumns 支持

Question

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

Github 问题：SectionList renderItem multi item support #13192

Answer 1

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

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

Answer 2

可以使用带有 numColumns 属性的 FlatList 作为 SectionList 的 renderItem。

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

Answer 3

深入研究这个问题，我想出了一个类似于 Pir Shukarullah Shah 的解决方案。

我正在使用 FlatList 而不是我的常规项目，只考虑 <SectionList/>'s renderItem 方法中的第一项。

 _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}
      />

Answer 4

 const DATA = [
     {
      renderItem: ({ item, index }) => {
          return (<View style={{flexDirection:'row', alignItems:'center', justifyContent:'space-between', }}>
          {item.map((elem,index)=>(<View style={{  borderColor: 'black', borderWidth: 2, minWidth:100 }}>
            <Text>{elem.value}</Text>
          </View>))
          }
          </View>);
       },
      data: [
        [{id:'1', value:'Pizza'}, {id:'2', value:'Burger'}, {id:'3', value:'Onion Rings'}], //this array length will be noOfColumns
        [{id:'4', value:'Risotto'}, {id:'5', value:'French Fries'}, {id:'6', value:'Water'}],
      ],
     },


   <SectionList
      ref={listRef}
      sections={DATA}
      keyExtractor={_keyExtractor}
    />

Answer 5

我发现有一个简单的解决方案。请尝试将以下属性添加到

contentContainerStyle={{
    flexDirection  : 'row',
    justifyContent : 'flex-start',
    alignItems     : 'flex-start',
    flexWrap       : 'wrap'
}}

此外，设置并渲染宽度等于 SectionList 宽度的部分 Header。否则，列表项将显示在行方向 Header 部分之后。

React Native - SectionList numColumns 支持

React Native - SectionList numColumns support

react-native

react-native-flatlist