如何在离线模式下更新 Firebase 实时数据库“推送”上的 UI答案

【问题标题】：How to update the UI on firebase realtime database "push" in offline mode如何在离线模式下更新 Firebase 实时数据库“推送”上的 UI
【发布时间】：2019-06-11 14:19:05
【问题描述】：

我在我的应用程序中使用 react-native-firebase。我面临的问题是当用户尝试在离线时推送数据时如何处理 UI 更新。

如果用户在线，我们可以使用 on() 方法获取实时更新，但是当他们离线时该怎么办。我们知道推送的数据存储在缓存中，当用户再次在线时推送。这个缓存的数据可以用来做我的目标吗？

这是我用来接收实时更新的代码：

var ref333 = firebase.database().ref(`/user-posts/${uid}/`)
ref333.on('value',function (snap) {
  var s = snap.val();
  console.log("NEW POSTS "+JSON.stringify(s))
})

我用来推送数据的代码。

var postData = { uid：uid，身体：'身体'，标题：'标题'，星数：0 };

// Get a key for a new Post.
var newPostKey = firebase.database().ref().child('posts').push().key;
var ref222 = firebase.database().ref(`/posts/${newPostKey}`)
var ref333 = firebase.database().ref(`/user-posts/${uid}/${newPostKey}`)
ref222.push(postData, function (onComplete) {
  console.log("COMPLETED")
  ref333.push(postData,function (onComplete) {
    console.log("NEXT COMPLETED")
  }, function (error) {
    console.log("ERROR IN ",error)
  })
}, function (error) {
  console.log("error == "+error)
})

【问题讨论】：

标签： firebase react-native firebase-realtime-database react-native-firebase

【解决方案1】：

通过将这行代码添加到您的本机代码中解决了这个问题：

https://rnfirebase.io/docs/v5.x.x/core/default-app#Enable-Database-Persistence

【讨论】：

【解决方案2】：

即使在离线模式下，也应该触发 .on snspashot 侦听器。根据文档： https://firebase.google.com/docs/database/web/read-and-write

您可以使用 value 事件读取内容的静态快照在给定的路径上，因为它们在事件发生时存在。这种方法连接监听器时触发一次，每次都触发一次包括孩子在内的数据会发生变化。

这也应该在离线模式下工作。如果您没有收到更新 - 有其他问题。

【讨论】：