react-native - React Native FlatList inside ScrollView onEndReached 从未调用过
问题描述
我的容器是一个滚动视图,里面是一个平面列表,它从服务器加载数据。
平面清单:
<VirtualizedList
ListEmptyComponent={<NoData />}
data={data}
getItem={(items, index) => items.get(index)}
getItemCount={(items) => items.size}
keyExtractor={(item, index) => String(index)}
renderItem={this._renderItem}
refreshControl={
<RefreshControl
refreshing={loading}
onRefresh={this._onRefresh.bind(this)}
/>
}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0.1}
onMomentumScrollBegin={() => {
Log('onMomentumScrollBegin fired!')
this.onEndReachedCalledDuringMomentum = false;
}}
/>
这handleLoadMore
是:
handleLoadMore = () => {
Log('handleLoadMore fired!');
if (!this.onEndReachedCalledDuringMomentum) {
// fetch data..
this.onEndReachedCalledDuringMomentum = true;
}
}
问题是handleLoadMore
从未被调用和onMomentumScrollBegin
也从未被调用。
如何解决这个问题?
解决方案
实际上你不需要使用Content
orScrollView
作为 FlatList 两者ListFooterComponent
兼而有之ListHeaderComponent
如果您确实需要在内部使用 FlatList ScrollView
,则将样式和内容 contentContainerStyle 添加到您的ScrollView
或者如果您使用 native-base,则在Content
<ScrollView
...
style={{flex: 1}}
contentContainerStyle={{flex: 1}}
...
/>
然后,如果您想在 FlatList 循环之外使用标头组件。然后ListHeaderComponent={() => <SomeHeader />
在 Flatlist 中使用。
推荐阅读
- java - 依赖项的 Spring Boot 环境特定属性
- php - 外键约束使 SELECT 查询返回 0 行
- docker - 使用 Docker 容器中的 go 1.10 构建缓存加速 Go 构建
- google-drive-api - 使用 google drive api 列出 google drive 模板
- python - 如何在python中查找和替换区分大小写的整个单词
- sql-server - 在 datetime 上添加固定时间会产生意想不到的结果
- django - 在 Django 中的 HttpResponseRedirect 之后会话丢失?
- excel - 需要将垂直单元格的内容复制到水平单元格中,然后水平复制公式并让它更新引用
- r - 将 `mutate_at()` 与 `as.Date()` 一起使用
- python - Pandas:函数中的列值分配不起作用