无限滚动FlatList标头

Question

[在我的本地本机应用程序中，我使用了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调用后呈现每种饮料类别时，如何向每个类别添加标题。我尝试使用ListHeaderComponent的FlatList道具来执行此操作，但由于只有一个FlatList而无法正常工作，因此标题更改了，但仍位于FlatList的最顶部，但是我需要使用该类别名称在每个FlatList“页面”的顶部]

Answer 1

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

https://reactnative.dev/docs/sectionlist