如何将Vector-Icons用作react-native-push-notification的通知图标

系统侧限制说明：Android、iOS原生通知系统仅支持位图格式作为通知图标资源，无法直接识别矢量图标或字体图标文件，所有实现方案本质都是将矢量图标转换为符合要求的位图后使用。

方案1：预转换矢量图标为原生资源（最稳定，优先推荐） #

该方案适配所有系统版本，性能最高，无兼容性问题，适合通知图标固定的场景：

• 按需导出你需要的Font Awesome/其他矢量图标，按照平台规范生成对应尺寸的png位图：
  • Android通知小图标要求为白色透明背景的Alpha通道图，尺寸对应：mdpi(24×24)、hdpi(36×36)、xhdpi(48×48)、xxhdpi(72×72)、xxxhdpi(96×96)
  • iOS通知图标按照系统规范生成对应倍率的png资源即可
• 将导出的位图资源放到对应原生目录：Android放入android/app/src/main/res/drawable-*各分辨率目录，iOS放入Xcode项目的Assets.xcassets中并做好标识
• 调用react-native-push-notification发通知时直接指定资源名即可，示例代码：

import PushNotification from 'react-native-push-notification';

PushNotification.localNotification({
  channelId: "your_custom_channel_id", // Android必填
  title: "通知标题",
  message: "通知正文内容",
  smallIcon: "ic_fa_star_notification", // 填入你存入原生资源的文件名，不需要后缀
  // 若要在大图标位置使用，替换为 largeIcon: "你的资源名" 即可
})

方案2：运行时动态转换矢量图标为位图（适合图标需要动态变化的场景） #

如果通知图标需要根据业务动态生成、无法提前预存，可以采用运行时转换的方案：

• 借助react-native-view-shot类截图库，将渲染在页面（可隐藏不展示）的矢量图标组件截图，生成本地临时png文件路径
• 发通知时将图标参数指定为该本地文件路径即可
  注意：该方案性能低于预生成方案，需要申请对应存储权限，仅适合非高频发送通知的场景，转换时需注意控制生成图标的尺寸符合通知规范，避免模糊。

额外适配注意项 #

• Android 5.0及以上系统会自动将通知小图标所有非透明区域转为白色，若使用彩色图标会出现显示异常，务必按要求导出白色透明背景的图标
• 若需要在通知展开后的内容区域展示矢量图标，可以将转换后的位图作为通知的大图标、或配图参数传入即可

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