React-Native 使用 Firebase 实时数据库加载更多

Question

当页面向下滚动时，我正在尝试从 firebase 加载更多数据，但它无法正常工作。 有很多关于在 cloudstore 上做这件事的文档，但在实时数据库上却没有，所以我卡住了。

问题：

1. 一开始它运行onendreached，
2. 当它工作时，经过 3-4 滚动底部； 它不再调用 onEndReached 了。
3. 有时 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 个数据。

我究竟做错了什么？

Answer 1

onMomentumScrollBegin 已弃用且无法正常工作。 删除它并编辑阈值保持为 0.01 解决了我的问题

...

                          ListFooterComponent={this.renderFooter}
                          onEndReachedThreshold = {0.01}
                          onEndReached = {this.retrieveMoreNotifications}
                          style={{flexGrow:0, marginBottom: 0, backgroundColor:'#fff'}}
                          keyExtractor={(item, index) => index.toString()}

    ...