如何使用Expo为推送通知设置自定义动态图标？

iOS端实现（匹配iOS消息APP效果） #

iOS可通过通知附件+通知服务扩展实现自定义通知图标，步骤如下：

1. 配置通知服务扩展
   在项目app.json中添加iOS扩展配置，让Expo支持处理可变通知内容：

   {
     "expo": {
       "ios": {
         "notificationServiceExtension": {
           "name": "NotificationService",
           "appleTeamId": "你的Apple团队ID"
         },
         "infoPlist": {
           "UIBackgroundModes": ["remote-notification"]
         }
       }
     }
   }
   

2. 发送推送时配置附件
   使用expo-server-sdk发送通知时，在ios字段开启mutableContent，并通过attachments指定自定义图标的HTTPS链接：

   import { Expo } from 'expo-server-sdk';
   const expo = new Expo({ accessToken: '你的Expo访问令牌' });
   
   const messages = [
     {
       to: '目标设备的Expo推送令牌',
       body: '来自群组A的通知内容',
       sound: 'default',
       ios: {
         mutableContent: true,
         attachments: [
           {
             url: 'https://example.com/group-a-icon.png', // 自定义图标HTTPS链接
             type: 'image/png',
             identifier: 'group-icon'
           }
         ]
       }
     }
   ];
   
   // 分块发送推送
   const chunks = expo.chunkPushNotifications(messages);
   for (const chunk of chunks) {
     try {
       await expo.sendPushNotificationsAsync(chunk);
     } catch (err) {
       console.error('推送失败:', err);
     }
   }
   

   注意：iOS要求图标为HTTPS资源，建议尺寸1024x1024，格式为PNG。

Android端实现 #

Android支持直接通过largeIcon字段设置自定义通知图标，无需额外扩展：
在推送payload的android字段中指定largeIcon的远程HTTPS链接即可：

const messages = [
  {
    to: '目标设备的Expo推送令牌',
    body: '来自群组B的通知内容',
    sound: 'default',
    android: {
      largeIcon: 'https://example.com/group-b-icon.png', // 自定义图标HTTPS链接
      // 若需替换小图标，需将图标放入项目资源目录，使用资源名（如@drawable/group_icon），动态图标优先用largeIcon
    }
  }
];

注意：Android的largeIcon建议尺寸256x256，支持PNG/JPG格式的HTTPS资源。

关键注意事项 #

• 确保项目已安装依赖：npx expo install expo-notifications
• iOS端必须开启mutableContent并配置通知服务扩展，否则附件不会生效
• 所有图标资源必须使用HTTPS链接，HTTP资源在双平台均可能被拦截

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