React Native中如何展示Firebase推送的所有已送达通知？

核心结论 #

展示用户全部关联通知的功能，需要后端（Django REST Framework）+ 前端（React Native）配合实现，后端负责数据的持久化存储与查询逻辑，前端负责UI渲染与交互处理。

具体分工 #

• 后端（Django）职责：

  • 存储通知记录：在数据库中创建通知表，字段包含标题、内容、推送时间、所属用户ID、是否已读等。当通知通过FCM推送时，要么在发送FCM的同时将通知数据存入后端数据库，要么等前端收到通知后上报到后端完成存储。
  • 提供查询接口：编写DRF API视图，根据当前登录用户的身份，返回该用户的所有通知列表，支持按时间排序、分页、筛选已读/未读状态等。
  • 处理状态更新：提供接口供前端调用，实现标记单条/全部通知为已读/未读的功能。

• 前端（React Native）职责：

  • 获取通知数据：在通知页面加载时，调用后端的通知查询接口，拉取当前用户的通知列表数据。
  • 渲染UI：根据后端返回的数据，展示通知的标题、内容、时间，通过样式区分已读/未读状态（比如未读通知用加粗字体或高亮背景）。
  • 交互处理：实现通知点击跳转、标记已读等交互，触发对应的后端接口调用。

为什么不能仅靠前端实现？ #

Firebase Messaging在客户端的通知存储是临时且有限的：卸载重装App后本地通知会丢失，也无法跨设备同步用户的通知记录。只有通过后端持久化存储，才能保证用户在任意设备登录都能查看完整的通知历史。

补充实现思路 #

如果使用FCM推送通知，可通过两种方式同步到后端：

1. 发送FCM通知时，直接调用Django接口将通知数据存入数据库并关联目标用户。
2. React Native收到FCM通知后，调用后端接口上传通知数据，由后端完成用户关联与存储。

内容的提问来源于stack exchange，提问作者jdez