Question

遵循RN https://github.com/npm/registry/tree/master/docs文档。如果我想在示例中构建一个同类的分区列表：

index

如何让index在各个部分之间继续进行？就像现在一样，SectionList。对于每个部分，class Product(models.Model): art_name = models.CharField(max_length=100) plu_num = models.IntegerField(default=0, unique=True) sales_price_brutto = models.FloatField(null=True) sales_price_netto = models.FloatField(null=True) last_price = models.FloatField(null=True) purchase_price_brutto = models.FloatField(null=True) purchase_price_netto = models.FloatField(null=True) entry_date = models.DateField() margin = models.FloatField(null=True) stock = models.IntegerField(default=0)从零开始。有没有其他方法可以让索引从第一个部分的第一个项目进展到最后一个部分的最后一个项目。有什么想法吗？

Answer 1

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

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

创建所有项目的数组
获取与array.find()
显示索引

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

N.B。我正在利用我特定的item形状，这是一个id道具的obj。但是很容易概括。 sections和items是obj的数组。

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

React-native SectionList Item索引在各节之间继续

1 个答案: