在多个组件中监听 on(child_added) - React native答案

【问题标题】：Listen to on(child_added) in multiple components - React native在多个组件中监听 on(child_added) - React native
【发布时间】：2021-07-06 17:19:09
【问题描述】：

我正在尝试使用带有 Firebase 的 React Native 构建即时消息传递应用程序。问题是查询新收到的消息，当用户打开聊天屏幕时效果很好（使用on('child_added').limitToLast(1)以避免多次不必要的呼叫）。但是，如果用户离开聊天并随后收到多条消息，则所有收到的消息都不会添加到聊天日志中，因为聊天组件仅针对添加的最新子项运行。如何确保应用程序监听所有child_added 而不管用户在哪个屏幕上？我不认为在每个组件中实现on('child_added') 是一个好主意，因为如果用户在收到消息时在聊天和另一个屏幕之间导航，它可能会创建同一消息的多个副本。

【问题讨论】：

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

【解决方案1】：

您有 2 个选项，您可以使用循环附加侦听器，我的意思是创建一个循环并一个接一个地将侦听器附加到所有必需的节点。但我想没有人会喜欢它。

因此，第二种方法是您可以使用 Firebase 云消息传递并从发送方发送消息，在接收方应用程序的 onMessgeReceived 中，您可以检索从发送方传递的任何数据。即使应用程序未运行，这也将帮助您获得通知等更新。

【讨论】：

能否附上任何链接，让我们完成整个过程？据我所知，FCM 是用来编写和发送推送通知的，我不知道如何绑定完整的消息数据，如果你可以放一个 sn-p 来显示onMessageReceived 的实现以及在哪里实现它（在聊天组件或收件箱组件或其他任何地方），它会很棒。谢谢！
您将通过 FCM 获得更新，例如新消息，并将其附加到已经可用的聊天列表中，如果没有，那么您需要获取较旧的聊天，您可能已经在 whatsapp 中注意到了这一点即使您打开聊天屏幕并仅显示最新的 1-2 条消息，它们也会加载较旧的聊天。因此，在 FCM 中使用相同的消息模型并在接收器上检索它并进一步将其附加到聊天列表中。虽然我不是 React Native 开发人员，但我可以指导您了解这些概念。
好的，我会调查一下，很快就会回来！
好的@PrajwalKulkarni，等待您的回复。

【解决方案2】：

在 React 应用程序中，我通常将 lift the state up 设置为两个屏幕共享的高级组件。

但在其他框架中，我有时会创建一个单独的“类”来管理此类场景中的侦听器。然后，您可以从需要访问数据的每个组件访问这个类，它可以管理侦听器和来自这些侦听器的数据。

React 也有很多用于此类统计管理的框架，因此您可能需要考虑查看 https://redux.js.org/ 或 others。

【讨论】：

抱歉回复晚了。正如您所建议的，使用应用程序范围的状态管理系统（如 redux 或 context API）是一个好主意。但据我所知，只有在分派动作时才能更新状态，通常，动作是从触发状态更新的组件中分派的。但是，在这种情况下，情况恰恰相反，更像是在添加新文档时从 firebase 触发的回调（在这种情况下，发送/接收新消息）。您能否使用代码 sn-p 进行解释或链接任何可以帮助我设置侦听器类的资源？