SectionList 在 renderSectionHeader 中获取节索引

Question

<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数据之外，我如何完成此操作？

Answer 1

在 react native 的 SectionList 中没有 renderSectionHeader 的部分索引，但您可以像这样为您的部分添加索引道具

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

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

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

Answer 2

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

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

希望这有帮助。

Answer 3

就我而言，由于我的数组具有不同的结构，我需要首先将其转换为title和data，但要添加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道具中，我现在可以从解构section中使用提取index。