javascript - React-native SectionList 项目索引在部分之间继续

Question

跟随 RN SectionList文档。如果我想像示例中那样构建同质部分列表:

<SectionList
  renderItem={({item, index}) => <ListItem title={item} index={index} />}
  renderSectionHeader={({section}) => <Header title={section.title} />}
  sections={[ // homogeneous rendering between sections
    {data: [...], title: ...},
    {data: [...], title: ...},
    {data: [...], title: ...},
  ]}
/>

如何使 index 在各部分之间继续？现在，index reflects the Item's index within the section .对于每个部分，索引 从零开始。有没有其他方法可以使索引从第一部分的第一项进展到最后一部分的最后一项。有什么想法吗？

Answer 1

从 RN 0.52 开始，没有仅通过利用 SectionList 的解决方案。显然，我们可以通过其他方式获得我们想要的结果。

我设法让索引从第一部分流到最后一部分，通过快速的 vanilla JS 解决方法逐项:

1. 创建一个包含所有项目的数组
2. 获取与 array.find()
结果相匹配的项目的索引
3. 显示索引

以下是我的解决方案中的几行:

注意我正在利用我的特定 item 形状，它是一个带有 id 属性的 obj。但这很容易概括。 sections 和 items 是对象数组。

 const Item = ({ item, itemsList }) => {
const foundItem = itemsList.find(i => i === item.id); // find the match
const itemIndex = itemsList.indexOf(foundItem); // get its index

return (
    <View>
        <Text>{itemIndex + 1}</Text>
    </View>
);
};

const Section = ({ section }) => (
 <View>
     <Text>{section.name}</Text>
 </View>
 );

 class List extends Component {
  renderList() {
    // create the `data` prop required for `SectionList` which contains `items`
    const dataSource = sections.map(s => {
        const { items, name } = s;
        return Object.assign({}, { name, key: s.id, data: items });
    });

    // create an array with all items' ids
    const itemsList = _.chain(sections)
        .map(s => s.items.map(item => item.id))
        .flatten()
        .value();

    return (
        <SectionList
            renderItem={({ item }) => (
                <Item item={item} itemsList={itemsList} />
            )}
            renderSectionHeader={({ section }) => (
                <Section section={section} />
            )}
            sections={dataSource} // must provide a nested array of obj with a `data` prop
            keyExtractor={item => item.id} // key for the nested array (items)
        />
    );
}

render() {
    return <View>{this.renderList()}</View>;
}
}