reactjs - 防止 Flatlist 在内容大小更改时滚动到顶部

Question

在 FlatList 中，我有 Accordion (by react-native-paper)。当我滚动到任何位置并打开/关闭 Accordion 时，FlatList 会滚​​动到屏幕顶部。我该如何预防？

换句话说，当 Accordion 展开时，内容的大小也会改变。如何在内容大小发生变化时保持用户所在的位置。当前代码段不起作用，存储的 y 位置重置。

  const flatListRef = React.useRef<FlatList<any>>(null);
  const yOffset = React.useRef<number>(0);

           <FlatList
             ref={flatListRef}
             data={properties}
             renderItem={renderItem}
             keyExtractor={(item) => `${item.id}`}
             onContentSizeChange={() =>{flatListRef.current!.scrollToOffset({offset: yOffset.current, animated: false});}}
             onEndReached={onEndReached}
             onEndReachedThreshold={0}
             scrollEventThrottle={15}
             onScroll={(e) => {yOffset.current = e.nativeEvent.contentOffset.y;}}
             ListFooterComponent={<ActivityIndicator animating={loading} size="small" />}
  />

例如，(在 onContentSizeChange conosle.log(yOffset.current) 中)如果我滚动到 yOffset 850 并在那里扩展 Accordion ，在控制台中我看到两个日志，850，然后是 126(126 返回到顶部)，这表明调用了 onScroll 并更改了 yOffset .

Answer 1

不确定你的问题，但如果你不想在 Accordion 展开时滚动到顶部，只需删除 onContentSizeChange 和 onScroll 属性。

此外，如果您希望 Accordion 式按键出现在屏幕顶部，只需将 Accordion 包裹在 View 中，并获得扩展的高度/xy 坐标View 使用 onLayout 属性然后你可以使用 Flatlist 的 scrollToOffset() 滚动到那个特定的 Accordion