如何在Expo React Native应用中为Android/iOS推送通知设置自定义图标？

一、iOS 端配置步骤 #

iOS 推送自定义图标需遵循 Apple 规范，结合 Expo 配置与推送 payload 实现：

1. 准备合规图标资源
   • 制作尺寸为 20x20、29x29、40x40、58x58、80x80、87x87、100x100、120x120、180x180 的透明背景 PNG 图标（无需圆角，系统自动处理）
   • 管理项目中，将图标放入 assets 目录，在 app.json 中配置：

     "ios": {
       "notificationIcon": "./assets/ios-notification-icon.png", // Expo 47+ 支持直接配置推送专用图标
       "infoPlist": {
         "UINotificationsSettings": {
           "notificationCenter": true,
           "lockScreen": true,
           "alert": true
         }
       }
     }
     

2. 推送 payload 指定图标
   使用 Expo Push API 发送时，在 payload 的 ios 字段中声明图标：

   await fetch('https://exp.host/--/api/v2/push/send', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
       'Accept': 'application/json'
     },
     body: JSON.stringify({
       to: '你的 Expo Push Token',
       title: '自定义图标通知',
       body: '这是带自定义图标的推送内容',
       ios: {
         icon: './assets/ios-notification-icon.png', // 本地资源路径或远程图标 URL
         badge: 1
       }
     })
   })
   

   裸项目需手动将图标添加到 Xcode 的 Assets.xcassets，命名为 NotificationIcon，推送时指定 icon: "NotificationIcon" 即可。

二、Android 端配置步骤 #

Android 推送图标可通过全局配置或 Notifee 渠道自定义实现：

1. 全局默认图标配置
   • 制作透明背景的图标（建议白色，适配深浅模式），尺寸包含 24x24、36x36、48x48、72x72、96x96、144x144、192x192
   • 在 app.json 中设置全局推送图标：

     "android": {
       "notificationIcon": "./assets/android-notification-icon.png"
     }
     

2. Notifee 自定义渠道图标
   若需为特定通知设置专属图标，初始化自定义通知渠道：

   import notifee from '@notifee/react-native';
   
   async function createCustomChannel() {
     const channelId = await notifee.createChannel({
       id: 'custom-icon-channel',
       name: '自定义图标通知渠道',
       icon: 'ic_custom_notification', // 对应资源目录中的图标名称（Expo 会自动打包 assets 中的资源）
     });
     return channelId;
   }
   
   // 发送带自定义图标的通知
   async function sendCustomNotification() {
     const channelId = await createCustomChannel();
     await notifee.displayNotification({
       title: 'Android 自定义图标通知',
       body: '这是带自定义图标的推送内容',
       android: {
         channelId,
         smallIcon: 'ic_custom_notification', // 覆盖全局默认图标
       },
     });
   }
   

三、常见问题排查 #

• Expo Go 测试环境不支持自定义图标，需使用 eas build 构建原生包测试
• iOS 图标必须为透明背景，否则会被系统替换为应用主图标
• Android 图标命名需符合原生规范（小写字母、无特殊字符）

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