如何在渲染数据后在 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)
|####| |####|
|####| |####|
|####| |####|
|####| |####|
|####| |####|
|####| |####|
最佳答案
出于文档目的,我将发布更详细的答案。这是重要的代码:
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 。
关于ios - 如何在某些数据部分之后将分隔符添加到 FlatList 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56171494/