Question

在我的React Native应用程序中，我使用了cocktailDB API的2个端点： 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的{{1}}道具来执行此操作，但是它没有用，因为只有一个FlatList，因此标头会更改，但仍位于{{1}的最顶部}，但我需要将该类别名称放在每个FlatList“页面”的顶部

Answer 1

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

https://reactnative.dev/docs/sectionlist

无限滚动FlatList标头

1 个答案: