javascript - React-Native Flatlist 使用 Firebase 实时数据库加载更多
问题描述
当页面向下滚动时,我正在尝试从 firebase 加载更多数据,但它无法正常工作。有很多关于在 cloudstore 上做这件事的文档,但在实时数据库上却没有,所以我卡住了。
问题:
- 一开始它运行onendreached,
- 当它工作时,经过 3-4 滚动底部;它不再调用 onEndReached 了。
- 有时 onEndReach 不起作用
我的职能:
retrieveNotifications = () => {
var that = this
database().ref('usernotifications/' + this.state.myuid).orderByChild('notificationDate').limitToLast(10).on('value', function(snapshot) {
if (snapshot.val()) {
that.setState({
notifications: Object.values(snapshot.val())
})
} else {
that.setState({
notifications: null
})
}
})
}
retrieveMoreNotifications = () => {
console.log('retrieve more')
this.setState({
refreshingList: true
})
setTimeout(() => {
var that = this
database().ref('usernotifications/' + this.state.myuid).orderByChild('notificationDate').limitToLast(this.state.notifications.length + 5).once('value').then(function(snapshot) {
if (snapshot.val()) {
that.setState({
notifications: Object.values(snapshot.val()),
refreshingList: false
})
} else {
that.setState({
notifications: null
})
}
})
}, 1500);
}
和平面列表:
<FlatList
ListFooterComponent={this.renderFooter}
initialNumToRender = {1}
onEndReachedThreshold = {0.1}
onMomentumScrollBegin = {() => {this.onEndReachedCalledDuringMomentum = false;}}
onEndReached = {() => {
if (!this.onEndReachedCalledDuringMomentum) {
this.retrieveMoreNotifications(); // LOAD MORE DATA
this.onEndReachedCalledDuringMomentum = true;
}
}}
style={{flexGrow:0, marginBottom: 0, backgroundColor:'#fff'}}
keyExtractor={(item, index) => index.toString()}
data={this.state.notifications.sort((a, b) => {
return new Date(b.notificationDate) - new Date(a.notificationDate);
})}
renderItem={({ item }) =>
<ListItem
bottomDivider
title={this.notificationTitleCreator(item)}
titleStyle={{fontSize: 15,}}
rightSubtitle={ Platform.OS =='ios' ?
new Date(item.notificationDate).toLocaleString('tr-TR') :
new Date(item.notificationDate).toLocaleDateString('tr-TR') + "\n" +
new Date(item.notificationDate).toLocaleTimeString('tr-TR') }
rightSubtitleStyle={{color:'#808080', fontSize: 16, marginTop: 5,}}
/>
}
/>
所以每次滚动基本上我想从数据库中提取比通知数组长度多 5 个数据。
我究竟做错了什么 ?
解决方案
onMomentumScrollBegin 已弃用且无法正常工作。删除它并编辑阈值保持为 0.01 解决了我的问题
...
ListFooterComponent={this.renderFooter}
onEndReachedThreshold = {0.01}
onEndReached = {this.retrieveMoreNotifications}
style={{flexGrow:0, marginBottom: 0, backgroundColor:'#fff'}}
keyExtractor={(item, index) => index.toString()}
...
推荐阅读
- javascript - HTML5 对话框中输入键的处理
- python - 不知道要导入哪个模块(尝试在文档中放置“模块”或“当前模块”指令,或给出明确的模块名称)
- reactjs - formik 嵌套动态对象
- css - 引导选择框 - 中心文本
- c++ - 有条件地从单链表中删除的 C++ 方法
- python - 使用 Python 识别 A 列中不在 B 列和 C 列中的值
- python - 从 python argv 调用共享库处理外部库选项
- linux - 电子托盘图标在 Ubuntu 20.04 上不起作用
- osmnx - OSMnx 中街道网络的日期
- flutter - 更改 Flutter 本地通知图标背景颜色