React Native FlatList 添加新项目时跳到顶部

Posted 2023-03-10

【中文标题】React Native FlatList 添加新项目时跳到顶部

【英文标题】：React Native FlatList jumps to the top when adding new items

【发布时间】：2020-07-27 07:12:34

【问题描述】：

我正在尝试向 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 都会滚动回顶部

【问题讨论】：

看看这个***.com/questions/52646021/…

我做了（也尝试了一些东西），但它似乎没有一个可靠的答案......

@EduardoPedroso 你能在世博小吃上发布一个可重复的例子吗？

可以加setPickupsGroups方法码

@MahdiN 只是一个 React 钩子。

【参考方案1】：

实际上，当您在 onCompleted 方法中调用 setPickupsGroups 方法时，它会导致屏幕重新渲染，尝试为 pickUpGroups 使用全局变量，或者如果您使用的是 apollo graphQL，那么从您的 graphQL 服务器尝试发送 hasMore，并在应用端调用 fetchMore 更新查询，这不会导致您的屏幕重新渲染，也不会滚动到顶部..