无限滚动 FlatList headers

Question

在我的 React Native 应用程序中，我使用了 cocktailDB 的 2 个端点 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 调用后呈现的每个饮料类别中添加 header。我试着用 FlatList 的 ListHeaderComponent 道具来做，但它没有用，因为只有一个 FlatList，所以 header 改变了，但仍然在最上面FlatList 但我需要该类别名称位于每个 FlatList "page"

的顶部

Answer 1

您必须使用 SectionList instead of FlatList，它有多个部分，就像您可以说多个 headers。

https://reactnative.dev/docs/sectionlist

无限滚动 FlatList headers

Infinite scroll FlatList headers

infinite-scroll

reactjs

react-native

react-native-flatlist