Параметр onEndReachedThreshold в плоском списке ReactNative Включает компоненты верхнего и нижнего колонтитула - PullRequest
Новая
       90

Параметр onEndReachedThreshold в плоском списке ReactNative Включает компоненты верхнего и нижнего колонтитула

1 голос
/ 09 июля 2020

Я пытаюсь реализовать бесконечную прокрутку с помощью Flatlist в реагирующем нативном Интернете. Я использую onEndReachedThreshold = {0.5} и onEndReached (чтобы получить больше данных) для того же. Но когда содержимое верхнего и нижнего колонтитула становится больше, onEndReached не вызывается, поскольку onEndReachedThreshold включает высоту содержимого верхнего и нижнего колонтитула.

Поскольку у меня есть несколько страниц с разным содержимым верхнего и нижнего колонтитула (некоторые из них не имеют) t имеет содержимое нижнего колонтитула), для которого я использую тот же компонент, постоянное значение в onEndReachedThreshold не будет работать.

Есть ли способ игнорировать высоту содержимого верхнего и нижнего колонтитула и включать только высоту основного списка (Карты в списке имеют разную высоту в зависимости от содержимого). 


const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);


        <Query
          query={listquery}
          variables={variables}          
        >
          {(data, fetchMore) => {
              return (
                <View style={style}>
                  <AnimatedFlatList
                    ListEmptyComponent={emptyComponent}
                    ListHeaderComponent={headerComponent}
                    ListFooterComponent={ footerComponent}
                    data={data}
                    initialNumToRender={20}
                    keyExtractor={item => item.id}
                    renderItem={({ item, index }) => (<listingCard item={item} index={index}/>)}
                    onEndReachedThreshold={0.5}
                    onEndReached={() => { fetchMore({variables,
                      updateQuery: (prev, { fetchMoreResult }) => {
                        if (!fetchMoreResult) return prev;
                        return fetchMoreResult;
                      }
                    });
                    }}
                  />                  
                </View>
              );
            }
            return null;
          }}
        </Query>
...