无限滚动平面列表标题

Question

在我的react原生应用程序中，我使用了cocktailDB API的两个端点：https://www.thecocktaildb.com/api/json/v1/1/list.php?c=list-饮料类别https://www.thecocktaildb.com/api/json/v1/1/filter.php?c=Ordinary%20Drink-饮料清单

我做了一个FlatList，onEndReached()更改页码并调用API以获取后续类别的饮料。饮料被添加到drinksList数组中，以便来自上一个API调用的数据保持在顶部。

<FlatList
keyExtractor={(item) => item.idDrink.toString()}
data={drinksList}
onEndReached={() => {
if (!isLoading) {
setCurrentPage((page) => page + 1);
}
}}
onEndReachedThreshold={0.3}
renderItem={({item}) => {
return (
<View>
<Image
style={{height: 100, width: 100, marginRight: 20}}
source={{uri: item.strDrinkThumb}}
/>
<Text>{item.strDrink}</Text>
</View>
);
}}
/>

我将数组index作为id分配给每个类别项，这样我就可以根据currentPage值访问它们。

我的问题是，当API调用后呈现时，如何向每个饮料类别添加标题。我试着用FlatList的ListHeaderComponent道具来做这件事，但没有成功，因为只有一个FlatList，所以标题发生了变化，但仍然位于FlatList的顶部，但我需要类别名称位于每个FlatList"页面"的顶部

Answer 1

您必须使用SectionList instead of FlatList，它有多个部分，就像您可以说的多个标头一样。

https://reactnative.dev/docs/sectionlist