React Native Android端Firebase自定义推送通知样式配置咨询

你目前已正常接收的基础推送通知样式如下：

你需要实现的扩展样式通知如下：

以下是具体配置步骤：

1. 消息类型选择 #

要实现自定义扩展样式，推荐后台发送**数据类型（data-only）**FCM消息，由App端接收后主动构建本地通知，灵活性更高；若直接使用FCM通知类型消息，仅能通过后台payload附加固定参数实现基础扩展样式，自定义程度较低。

2. 依赖安装 #

推荐使用@notifee/react-native配合@react-native-firebase/messaging实现通知构建，执行以下命令安装依赖：

# 安装Firebase消息依赖
npm install @react-native-firebase/messaging
# 安装通知构建依赖
npm install @notifee/react-native
# 同步安卓项目
cd android && ./gradlew clean && cd ..

3. 安卓通知通道配置（Android 8.0+必填） #

需提前创建高优先级通知通道，保证通知正常弹出：

import messaging from '@react-native-firebase/messaging';

// 动态创建通知通道
await messaging().createChannel({
  id: 'extended_notification_channel',
  name: '扩展通知通道',
  importance: messaging.AndroidImportance.Max,
  vibration: true,
  sound: 'default',
});

4. 消息监听与通知构建 #

分别配置前台、后台的FCM消息监听逻辑，收到消息后按扩展样式构建通知：

import messaging from '@react-native-firebase/messaging';
import notifee, { AndroidStyle } from '@notifee/react-native';

// 前台消息监听
messaging().onMessage(async remoteMessage => {
  const { title, body, big_image } = remoteMessage.data;
  await notifee.displayNotification({
    title: title,
    body: body,
    android: {
      channelId: 'extended_notification_channel',
      style: {
        // 指定大图样式，对应你需要的带大图的通知效果
        type: AndroidStyle.BIGPICTURE,
        picture: big_image
      }
    }
  })
})

// 后台消息监听
messaging().setBackgroundMessageHandler(async remoteMessage => {
  const { title, body, big_image } = remoteMessage.data;
  await notifee.displayNotification({
    title: title,
    body: body,
    android: {
      channelId: 'extended_notification_channel',
      style: {
        type: AndroidStyle.BIGPICTURE,
        picture: big_image
      }
    }
  })
})

5. 后台发送消息payload配置 #

后台发送FCM数据消息时，参考以下格式传参即可：

{
  "to": "用户设备的FCM Token",
  "data": {
    "title": "通知标题",
    "body": "通知正文内容",
    "big_image": "通知大图的可访问地址"
  }
}

如果要直接使用FCM通知类型消息实现，参考以下payload配置：

{
  "to": "用户设备的FCM Token",
  "notification": {
    "title": "通知标题",
    "body": "通知正文内容"
  },
  "android": {
    "notification": {
      "image": "通知大图的可访问地址"
    }
  }
}

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