当页面向下滚动时,我正在尝试从Firebase加载更多数据,但无法正常工作。关于如何在cloudstore上执行此操作的文档很多,但在实时数据库上却没有,所以我被困住了。
问题:
我的职能:
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:
<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()}
...