在 react native flatlist 中使用 Apollo 挂钩的最佳分页实现是啥？

Posted 2023-03-10

【中文标题】在 react native flatlist 中使用 Apollo 挂钩的最佳分页实现是啥？

【英文标题】：What is the best implementation of pagination using Apollo hooks in a react native flatlist?在 react native flatlist 中使用 Apollo 挂钩的最佳分页实现是什么？

【发布时间】：2021-08-08 07:15:20

【问题描述】：

我正在寻找有关如何在使用 apollo 钩子时最好地在 flatlist 提供的 onEndReached 回调中实现 loadMore 函数的见解！我已经让它工作了，除了每次我加载更多结果时，列表都会跳到顶部，因为 flatlist 的数据字段依赖于来自 useQuery 的传入数据，每次它要求更多时都会改变...... 我不知道我是否应该实施基于偏移和限制的分页、基于光标或其他一些策略。 如果有人有提示，那将是巨大的！谢谢！

【参考方案1】：

我正在使用 Shopify 店面 graphql 查询来获取产品列表，以下是我如何在 FlatList 上使用基于光标的分页方法实现分页。希望你能找到一些有用的东西。

首先，声明两个变量，稍后将用于检查 Flatlist 是否滚动并到达末尾。

// declare these two variables
let isFlatlistScrolled = false;
let onEndReachedCalledDuringMomentum = false;

现在，创建一个名为 handleFlatlistScroll 的方法，用于在滚动平面列表时更改变量 isFlatlistScrolled 的值。

const handleFlatlistScroll = () => 
  isFlatlistScrolled = true;
;

同时声明一个方法来改变onEndReachedCalledDuringMomentum的值。

const onMomentumScrollBegin = () => 
  onEndReachedCalledDuringMomentum = false;

现在，像这样创建您的平面列表：

return (
  <Layout style= flex: 1 >
    <Query
      query=GET_PRODUCT_LIST_BY_COLLECTION_HANDLE
      variables=
        handle: props.route.params.handle,
        cursor: null,
      >
      (
        loading,
        error,
        data,
        fetchMore,
        networkStatus,
        refetch,
        stopPolling,
      ) => 
        if (loading) 
          return <ProductListPlaceholder />;
        
        if (data && data.collectionByHandle?.products?.edges?.length > 0) 
          stopPolling();
          return (
            <FlatList
              data=data.collectionByHandle.products.edges
              keyExtractor=(item, index) => item.node.id
              renderItem=renderProductsItem
              initialNumToRender=20
              onScroll=handleFlatlistScroll
              onEndReached=() => 
                if (
                  !onEndReachedCalledDuringMomentum &&
                  isFlatlistScrolled &&
                  !isLoadingMoreProducts &&
                  !loading &&
                  data.collectionByHandle?.products?.pageInfo?.hasNextPage
                ) 
                  onEndReachedCalledDuringMomentum = true;
                  setLoadingMoreProductsStatus(true);
                  // your loadmore function to fetch more products
                
              
              onEndReachedThreshold=Platform.OS === 'ios' ? 0 : 0.1
              onMomentumScrollBegin=onMomentumScrollBegin
              // ... your other flatlist props
            />
          );
        
        return <EmptyProductList />;
      
    </Query>
  </Layout>
)

正如你在上面的代码中看到的，加载更多的函数只有在 flatlist 在最后正确滚动时才会调用。

【讨论】：

感谢您的意见！您如何处理新结果的合并？当我加载新项目时，我的平面列表会重新呈现，因为数据属性发生了变化......

它基于您呈现平面列表的数据。我使用了一个返回数据变量的阿波罗查询，所以我只是将新的返回与该数据连接起来。您还可以将新数据与当前数据连接起来。