SectionList 获取 renderSectionHeader 中的节索引

Posted 2023-02-16

【中文标题】SectionList 获取 renderSectionHeader 中的节索引

【英文标题】：SectionList get section index in renderSectionHeader

【发布时间】：2018-10-22 17:03:53

【问题描述】：

<SectionList
  sections=[ data: [1, 2] ,  data: [3, 4] ]
  renderItem=( item, index ) => ...
  renderSectionHeader=( section, index , i) => 
    console.log(index, i); // both undefined
  
/>

我想获取renderSectionHeader中的部分索引。 例如。当section.data 为[1, 2] 时index 应为0，当section.data 为[3, 4] 时为1。

除了将索引添加到sections 数据之外，我还能如何做到这一点？

【参考方案1】：

React Native 的 SectionList 中没有 renderSectionHeader 的部分索引，但您可以像这样向您的部分添加索引道具

 sections=[ data: [1, 2], index:0 ,  data: [3, 4], index:1 ]

然后像这样访问renderSectionHeader中的索引

 renderSectionHeader=(section) => 
     console.log(section.index); 
 

【讨论】：

你拯救了我的一天！！需要自定义索引！！谢谢。

这对于包含一个部分的任何数据非常有用。

如果我们的部分是动态的并且我们无法对索引进行硬编码怎么办？

我同意@PulkitSharma，如果我们的数据是动态的怎么办？它;不会工作。这不是一个好的解决方案。

如果需要动态添加索引，直接映射进去即可。<SectionList sections=sections.map((section, index) => ( ...section, index )) />

【参考方案2】：

我知道现在已经晚了，但也许它可以帮助某人。更好的方法是从传递给 SectionList 组件的数组中获取节的索引。 例如假设你有dataList作为数组传递给sections=dataList，那么你可以得到如下索引：

renderSectionHeader=( section ) => 
    const index = dataList.indexOf(section)
    // Here you have the index
    return <View />

希望这会有所帮助。

【讨论】：

这不是一个好的解决方案，因为您使用的是indexOf ，这意味着额外的搜索效率不高。