React native React Native-SectionList numColumns支持

具有

numColumns

支持。如何使用设置

numColumns

---

Github问题：

以下是我对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}
      />
    );
  }
}

类示例扩展组件{
静态类型={
numColumns:PropTypes.number
};
静态defaultProps={
numColumns:2
};
_renderSection=data=>；
_renderItem=（{节，索引}）=>{
const{numColumns}=this.props；
if（索引%numColumns！==0）返回null；
常量项=[]；
for（设i=index；i=节数据长度）{
打破
}
items.push（）；
}
返回(
{items}
);
};
render（）{
返回(
);
}
}

可以使用带有numColumns道具的平面列表作为SectionList的渲染器

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

const data=[//注意[…]，而不是像RN文档中那样的[…]
{数据：[……]，标题：…}，
{数据：[……]，标题：…}，
{数据：[……]，标题：…}，
]
渲染（）{
返回(
)
}
renderSectionListItem=（{item}）=>{
返回(
)
}

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

我使用的是平面列表而不是常规项，只考虑了

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

\u renderList=（{section，index}）=>{
如果（索引！==0）返回null；
返回(
)
}
...

常量数据=[
{
renderItem:（{item，index}）=>{
返回(
{item.map（（元素，索引）=>(
{elem.value}
))
}
);
},
数据：[
[{id:'1'，值：'Pizza'}，{id:'2'，值：'Burger'}，{id:'3'，值：'Onion Rings'}，//此数组长度将为noOfColumns
[{id:'4'，value:'Risotto'}，{id:'5'，value:'French Fries'}，{id:'6'，value:'Water'}]，
],
},

从Github的问题来看，这个问题已经解决了……那么你为什么在这里发布这个问题呢？我相信这个问题没有得到正确的解决，我也在那里发布了我的答案。是的，这是可能的，但是为什么你只需要3个项目的

FlastList

？@Pirshukarullahsha我发布的代码只是使用FlatList的一个例子显示3列（不是3个项目），每个列表中有一定数量的项目。选择您自己的numColums、您自己的项目数量、您自己的节数。据我所知，没有限制，但使用RemoveClippedSubview可以提高性能。不建议这样做，因为只有一些（可能100个）项目的性能会非常差FlatList中的项目。FlatLists对我来说可以处理1000个项目。没有尝试过更多。通过正确使用shouldcomponentupdate和RemoveClippedSubview，对于较大的列表，性能似乎根本不会恶化。最好的回答是，新的bie，你能告诉我'dumyData'变量是什么样子吗？@pir shukaru啊-shah@iDevAmit它的格式应该与普通的分区列表相同…类似于本例中的“数据”数组。此解决方案在加载图像时提供了一种滞后的体验

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