防止 Flatlist 在内容大小变化时滚动到顶部

Question

在

FlatList

里面我有手风琴（由react-native-paper）。当我滚动到任何位置并打开/关闭手风琴时，

FlatList

滚动到屏幕顶部。我该如何预防？

换句话说，当手风琴展开时，内容大小会发生变化。如何在内容大小发生变化时保持用户所在的位置。当前片段不起作用，存储的 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

并展开那里的手风琴，在控制台我看到两个日志，

850

，然后

126

（126返回到top) 表示调用了 onScroll 并且更改了 yOffset。

Answer 1

解决此问题的正确方法是将呈现的 Item 移出您的主要组件并在该单独的组件中管理其状态（例如，在手风琴的情况下）。这样平面列表就不会被重新渲染，因此会保持其滚动位置。我只是自己实现了它并且它起作用了。

const YourRenderItem = ({ item, index }) => {
 const [isExpanded, setIsExpanded] = useState(false);
 return (<YourComponent/>)
}

Answer 2

在这里不确定你的问题，但如果你不想滚动到手风琴扩展的顶部，只需删除

onContentSizeChange

和

onScroll

prop.

另外，如果你想要手风琴新闻应该出现在屏幕顶部，只需将

Accordion

包裹在

View

中并使用

View

道具获得

onLayout

的扩展高度/ xy 坐标，然后你可以使用 Flatlist 的

scrollToOffset()

滚动到那个特定的

Accordion