[RN]使用react-native-push-notification 和 Firebase实现APP推送

20 篇文章 1 订阅
3 篇文章 0 订阅
本文档详细介绍了如何在React Native应用中使用Firebase进行消息推送和配置。主要内容包括设备注册、消息收发流程、Firebase侦听器的使用,以及针对不同状态的应用如何处理FCM通知。同时,提到了在应用中处理通知显示和本地通知的生成,以及应用徽章的更新。在iOS12以下版本需要注意的兼容性问题也有所提及。
摘要由CSDN通过智能技术生成

react native firebase文档 - 安装和配置

生命周期流:

  • 注册设备以接收来自 FCM 的消息。客户端应用的实例注册以接收消息,并获取唯一标识应用实例的注册令牌。
  • 发送和接收下行消息。
    发送消息。应用服务器向客户端应用发送消息:
  1. 消息会在通知编辑器或受信任的环境中编写,并且消息请求会被发送到 FCM后端。
  2. FCM 后端接收消息请求,生成消息 ID 和其他元数据,并将其发送到平台特定的传输层。
  3. 当设备在线时,系统会通过平台特定的传输层将消息发送到设备。
  4. 在设备上,客户端应用会接收到消息或通知。

Firebase侦听器

https://rnfirebase.io/reference/messaging

当应用程序从退出状态打开时,按下来自FCM的通知

 messaging().getInitialNotification().then((remoteMessage) => { } )

当收到任何 FCM 有效负载时(前台)

messaging().onMessage( (remoteMessage)=>{ } )

当用户按下通过 FCM 显示的通知时,如果应用程序从后台状态打开,将调用此侦听器。

messaging().onNotificationOpenedApp((remoteMessage) => { } )

message-handlers

当打开或接收到任何通知时,调用react-native-push-notification的回调onNotification,它传递一个带有通知数据的对象。

https://github.com/zo0r/react-native-push-notification

通知

https://rnfirebase.io/messaging/usage#notifications
应用在前台时不会显示通知,可以在onMessage里生成本地通知

PushNotification.localNotification({
        channelId: 'Android',
        id: id,
        title: title,
        message: message,
        userInfo: userInfo || {},
        playSound: false,
        soundName: 'default',
       	color: color,
        imageUrl: imageUrl,
        smallIcon: smallIcon
});

*注意会出现问题: 通知出现时马上打开应用(或点该条推送打开应用),会生成本地通知导致重复
解决: 点击推送的时候缓存该条推送信息,onMessage的时候对比收到的数据是否是刚刚打开的那条,还有对比是否是通知列表中最新的一条

应用程序徽章

react-native-push-notification提供了getApplicationIconBadgeNumber和setApplicationIconBadgeNumber方法

push-notification-ios用到的criticalAlertSetting要ios 12.0+,在ios 12以下的系统上打开会黑屏

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值