我是反应原生的新手,所以这可能是一个新手的疑问。我正在使用react-native FlatList 组件,在这里我尝试实现在向上滚动和向下滚动手势上加载更多数据。该代码在网络浏览器视图中工作正常,但对于 Android 移动设备,onScroll 出现故障,它并非每次都工作。
const handleScroll = (event) => {
const scrollPosition = event.nativeEvent.contentOffset.y;
if (scrollPosition <= 0 && !loading && !scrollingUp) {
setScrollingUp(true);
const scrollOffsetBefore = event.nativeEvent.contentSize.height;
loadMoreDates('top').then(() => {
const scrollOffsetAfter = event.nativeEvent.contentSize.height;
const addedContentHeight = scrollOffsetAfter - scrollOffsetBefore;
flatListRef?.current.scrollToOffset({ offset: addedContentHeight, animated: false });
setScrollingUp(false);
});
}
};
-----
<FlatList
ref={flatListRef}
data={dateList}
renderItem={renderDateItem}
keyExtractor={(item) => `${item.date}`}
onEndReached={() => loadMoreDates('down')}
onEndReachedThreshold={0.1}
onScroll={handleScroll}
ListFooterComponent={loading ? <Text>Loading...</Text> : null}
ListHeaderComponent={loading ? <Text>Loading...</Text> : null}
style={[{ marginTop: 20 }]}
/>
我知道 onRefresh 属性,但使用它不会为用户提供无缝滚动。我也尝试在互联网上查找,但我只收到有关滚动到顶部道具的文章。如果有人能告诉我应该在哪里研究,那就太好了。
尝试将
<FlatList ...
更改为 <Animated.FlatList...