React Native集成Firebase推送通知：实现右侧小图标与展开大图功能

基础准备 #

• 确保项目已集成 @react-native-firebase/app 和 @react-native-firebase/messaging，Android/iOS 的 Firebase 配置文件（google-services.json/GoogleService-Info.plist）已正确放置，且已完成通知权限申请。
• 准备资源：
  • Android 小图标：制作24x24dp的透明背景图标，放入 Android 项目的res/drawable-xxxhdpi等对应分辨率目录，命名如ic_notify_small。
  • 大图：准备尺寸合适的图片（如1024x512px），上传至公开CDN或Firebase Storage获取可访问URL；若用本地资源，Android放drawable目录、iOS放入Assets，但远程图灵活性更高。

Android 端具体实现 #

Android 支持通过BigPictureStyle实现需求样式：

1. 设置默认小图标 #

在AndroidManifest.xml中添加配置，指定默认通知小图标：

<meta-data
  android:name="com.google.firebase.messaging.default_notification_icon"
  android:resource="@drawable/ic_notify_small" />

2. 后台/杀死状态下的推送 #

此状态下由FCM直接推送给系统，需在推送payload中指定样式：

{
  "to": "目标设备Token",
  "notification": {
    "title": "新消息提醒",
    "body": "点击查看大图",
    "icon": "ic_notify_small",
    "android": {
      "notification": {
        "style": "bigpicture",
        "bigPicture": "https://xxx.com/你的大图URL",
        "largeIcon": "ic_notify_small"
      }
    }
  },
  "data": {
    "page": "detail"
  }
}

3. App前台时的推送 #

App在前台时FCM不会自动弹通知，需用@react-native-firebase/notifications（推荐用notifee库）手动构建通知：

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

// 监听前台消息
messaging().onMessage(async remoteMsg => {
  // 构建大图样式
  const bigPicStyle = new notifee.BigPictureStyle()
    .setBigPicture('https://xxx.com/你的大图URL')
    .setLargeIcon('ic_notify_small');

  // 显示通知
  await notifee.displayNotification({
    title: remoteMsg.notification.title,
    body: remoteMsg.notification.body,
    android: {
      smallIcon: 'ic_notify_small',
      style: bigPicStyle,
      largeIcon: 'ic_notify_small'
    }
  });
});

iOS 端实现 #

iOS 需用通知附件实现大图展示，小图标为Xcode中配置的通知图标：

1. 配置通知图标 #

打开Xcode的Assets.xcassets，添加Notification类型图标，按要求制作对应尺寸（20x20、29x29、40x40、60x60pt，含不同分辨率变体）。

2. 前台推送处理 #

iOS前台需先下载大图到本地（仅支持本地文件作为通知附件）：

import messaging from '@react-native-firebase/messaging';
import notifee from '@react-native-firebase/notifications';
import RNFetchBlob from 'rn-fetch-blob';

// 请求通知权限
async function applyNotifyPermission() {
  const authStatus = await messaging().requestPermission();
  const enabled = authStatus === messaging.AuthorizationStatus.AUTHORIZED || authStatus === messaging.AuthorizationStatus.PROVISIONAL;
  if (!enabled) alert('请开启通知权限以接收推送');
}

// 监听前台消息
messaging().onMessage(async remoteMsg => {
  const imageUrl = remoteMsg.data.bigPicUrl;
  // 下载大图到本地目录
  const localPath = `${RNFetchBlob.fs.dirs.DocumentDir}/notify_bigpic.jpg`;
  await RNFetchBlob.config({ path: localPath }).fetch('GET', imageUrl);

  // 创建通知附件
  const attachment = new notifee.NotificationAttachment({
    uri: localPath,
    type: 'image/jpeg'
  });

  // 显示通知
  await notifee.displayNotification({
    title: remoteMsg.notification.title,
    body: remoteMsg.notification.body,
    ios: {
      attachments: [attachment],
      badge: 1,
      sound: 'default'
    }
  });
});

3. 后台/杀死状态下的推送 #

iOS后台推送要显示大图，必须创建Notification Service Extension：在Xcode中通过File->New->Target选择该扩展，在扩展代码中实现大图下载并添加为通知附件，否则后台推送的大图无法展示。

踩坑提醒 #

• Android小图标必须用透明背景，否则会显示为白色方块。
• 大图URL需确保可公开访问，使用Firebase Storage时要配置对应存储权限。
• iOS的Notification Service Extension需单独配置签名，避免打包报错。
• 测试时需覆盖前台、后台、App被杀死三种状态，各状态处理逻辑不同。

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