Reactjs 无限滚动平面列表标题

在我的react原生应用程序中，我使用cocktailDB API的两个端点： -饮料类别 -酒水单

我制作了一个

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

item.idDrink.toString（）}
数据={drinksList}
onEndReached={（）=>{
如果（！isLoading）{
setCurrentPage（（第页）=>第+1页）；
}
}}
onEndReachedThreshold={0.3}
renderItem={（{item}）=>{
返回(
{item.strDrink}
);
}}
/>

我将数组

index

作为

id

分配给每个类别项，这样我就可以根据

currentPage

值访问它们

---

我的问题是，在API调用后呈现每个饮料类别时，如何向其添加标题。我试着用

FlatList的
ListHeaderComponent
prop做这件事，但它不起作用，因为只有一个
FlatList
，所以标题会发生变化，但仍保持在
FlatList
的顶部，但我需要将类别名称放在每个
FlatList
页面的顶部
您必须使用
SectionList而不是FlatList
，它有多个部分，您可以说有多个标题

谢谢。对不起，我是新来的不用担心，兄弟。