React Native FlatList прыгает наверх при добавлении новых предметов

Question

Я пытаюсь добавить функцию бесконечной прокрутки в FlatList:

<FlatList
   data={pickupsGroups}
   renderItem={({item , index}: {item: PickupGroup, index: number}) => {
                    return <PickingCard group={item} onPress={onPressPickup}/>
   }}
   onRefresh={onRefresh}
   keyExtractor={item => `${item?.title}-${item?.totalSku}`}
   refreshing={refreshing}
   onEndReached={() => {
     setPage(page + 1)
   }}
   onEndReachedThreshold={0.1}
/>

, когда меняется page, я запускаю запрос GraphQL:

    const {loading} = useQuery(MY_GROUPS, {
        variables: {limit: 10, page},
        fetchPolicy: "network-only",
        onCompleted: data => {
            setPickupsGroups(pickupsGroups.concat(data.myPickupGroups.pickupGroups))
        }
    })

Но каждый Когда я добавляю новые элементы в pickupGroups, FlatList прокручивается обратно к вершине

Answer 1

вы можете использовать onViewableItemsChanged для проверки, какой элемент в данный момент находится вначале, и на initialScrollIndex выделите его

---

 const [currentItem, setCurrentItem] = useState(null);


 <FlatList
   onViewableItemsChanged={viewableItems=>setCurrentItem(viewableItems[0])}
   initialScrollIndex={currentItem ? pickupsGroups.indexOf(currentItem) : 0}
  />

Answer 2

На самом деле, когда вы вызываете метод setPickupsGroups в методе onCompleted, он вызывает повторную визуализацию экрана, пытается использовать глобальную переменную для pickUpGroups или, если вы используете apollo graphQL, затем с вашего сервера graphQL попробуйте отправить hasMore и на стороне приложения. вызовите fetchMore Update Query, который не вызовет повторного рендеринга экрана и не будет прокручиваться вверх.