Заголовки FlatList с бесконечной прокруткой - PullRequest
Новая
       21

Заголовки FlatList с бесконечной прокруткой

0 голосов

В моем собственном приложении для реакции я использую 2 конечные точки API cocktailDB: 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 prop из FlatList, но это не сработало, потому что есть только один FlatList, поэтому заголовок изменяется, но остается на самом верху FlatList, но мне нужно, чтобы это имя категории было быть наверху каждой FlatList «страницы»

1 Ответ

1 голос
/ 06 мая 2020

Вы должны использовать SectionList instead of FlatList, который имеет несколько разделов, например, вы можете сказать несколько заголовков.

https://reactnative.dev/docs/sectionlist

...