Question

我有一些像这样的JSON数据：

{
  "distance":"1",
  "name":"whatever",
  "listPriority":"1",
}

我将其传递给Flatlist：

<FlatList
                    key={'my-list'}
                    data={JSON}
                    renderItem={this.renderCard}
                    keyExtractor={(item, index) => index.toString()}
                />

我要做的是根据列表优先级对数据进行分区，因此所有listPriority键值为1的项都将显示在我的节标题下，该标题为“这些是1项”，值为listPriority键2将具有一个标有“ Section header 2”的节标题，依此类推。

即结果是这样的：

列表优先级1

列表中的项目
列表中的项目

列表优先级2

列表中的项目
列表中的项目

列表优先级3

列表中的项目
列表中的项目

如何将部分放入Flatlist中？

Sectionlist似乎只有在您为每个手动输入的部分传递单独的数据集时。

Answer 1

您似乎可以使用SectionList组件，这将使您的标头和（如果您愿意）它们具有粘性，这是一种很好的行为。因此，您只需要创建一个对象数组即可，该对象遵循所需的格式以使组件正常工作。

<SectionList
  renderItem={({item}) => someFunctionHere(item)/<SomeComponent item={item}>}
  sections={sections}
  keyExtractor={(item, index) => index.toString()}
/>

将sections定义为以下格式的数组：

[
  { 
    title: "List priority 1", 
    data: [{"distance":"1", "listPriority": "1"...}, ...]
  },
  { 
    title: "List priority 2", 
    data: [{"distance":"20", "listPriority": "2"...}, ...]
  },
  ...
]

因此，再次格式化您的数据（最有可能在componentDidMount挂钩中），然后在格式化数据时，可以将其包含在状态中，并最终将其输入到SectionList组件中，以便将重新渲染

从一个数据集中渲染平面列表/截面列表中的截面

列表优先级1

列表优先级2

列表优先级3

1 个答案: