ios - 如何在某些数据部分之后将分隔符添加到 FlatList 中？

Question

如何在渲染数据后在 React-Native FlatList 中添加分隔符？

我尝试使用 React-Native SectionList，但我无法像在 FlatList 中那样添加 fetchNext 函数。

这是我当前的代码

<FlatList
  data={data}
  keyExtractor={keyExtractor}
  renderItem={renderItem}
  fetchNext={fetchNextPage}
  numColumns={2}
  ItemSeparatorComponent={<View style={this.separatorStyles} />}
  ListFooterComponent={isFetching && <LoaderView notExpand />}
/>

|####| |####|
|####| |####|
|####| |####|

|####| |####|
|####| |####|
|####| |####|
------------- (need add some separator)
|####| |####|
|####| |####|
|####| |####|

|####| |####|
|####| |####|
|####| |####|

Answer 1

出于文档目的，我将发布更详细的答案。这是重要的代码:

const data = [{ id: 1 }, { id: 2 }, { separator: true, id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }];

renderItem = ({ item }) => item.separator ? (
  <Text>-------- separator -------</Text>
) : (
  <Text>{`------${item.id}------`}</Text>
);

<FlatList
  renderItem={this.renderItem}
  data={data}
  numColumns={2}
/>

请注意，如果分隔符占据整个屏幕宽度，则项目 4 将呈现在屏幕之外。例如，您可以在分隔符之后呈现一个空 View 。