React-Native Flatlist使用Firebase Realtime DB加载更多内容

问题描述 投票:0回答:1

当页面向下滚动时,我正在尝试从Firebase加载更多数据,但无法正常工作。关于如何在cloudstore上执行此操作的文档很多,但在实时数据库上却没有,所以我被困住了。

问题:

  1. 一开始它会不断扩展,
  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:

              <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个数据,而不是通知数组的长度。

我在做什么错?

firebase react-native
1个回答
0
投票

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

...

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

    ...
© www.soinside.com 2019 - 2024. All rights reserved.