React Native 节列表获取renderSectionHeader中的节索引

ny6fqffe  于 2023-02-25  发布在  React
关注(0)|答案(3)|浏览(192)
<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]时,index应为1。
除了向sections数据添加索引之外,如何才能实现这一点?

3mpgtkmj

3mpgtkmj1#

react native的SectionList中没有renderSectionHeader的节索引,但您可以向节添加索引属性,如下所示

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

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

renderSectionHeader={({section}) => {
     console.log(section.index); 
 }}
ymzxtsji

ymzxtsji2#

我知道这有点晚了,但也许这对某些人有帮助。一个更好的方法是从你传递给SectionList组件的数组中获取你的section的索引。例如,假设你有dataList作为数组,它被传递给section sections={dataList},那么你可以如下所示获取索引:

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

希望这个有用。

lymnna71

lymnna713#

在我的例子中,由于我的数组有不同的结构,我需要首先将它转换为titledata,但添加了index

const transformedData = data.reduce((r: any, s: any, i: number) => {
    r.push({
        index: i, // newly added, to be used later
        title: s.month,
        data: s.summaries
    });
    return r;
}, []);

reduce()的第三个参数是一个索引,所以我提取了它,并在将它推入transformedData数组时在新对象中显式创建了一个index

<SectionList
    sections={transformedData}
    keyExtractor={(item, index) => `report-${index}`}
    renderItem={({item, index}) => {
        return <Cell summary={item} idx={index} />;
    }}
    stickySectionHeadersEnabled={false}
    renderSectionHeader={({section: {index, title}}) => (
        <BodySubText style={{marginTop: index === 0 ? 16 : 24, backgroundColor: 'red'}} text={title} />
    )}
/>

现在,在renderSectionHeader属性中,我可以使用extract index从结构化的section中提取index

相关问题