切换至react-native-push-notification后，如何自定义通知标题与消息

刚好之前我也折腾过react-native-push-notification的自定义通知，跟你遇到的情况一模一样——从react-native-fcm转过来，默认自动展示的通知没法用上payload里的自定义字段，后来摸索出了一套可行的方案，分享给你：

核心思路就是：先阻止库自动弹出远程通知，然后拿到完整的payload后，自己调用PushNotification.localNotification()来定制通知的每一个细节。

1. 先把自动展示给关掉 #

Android端配置 #

最直接的方式是在初始化PushNotification的回调里拦截，当判断是远程通知时返回false，就能阻止系统自动展示：

PushNotification.configure({
  // 其他基础配置（比如权限请求、初始化设置）
  onNotification: function(notification) {
    // 只拦截远程通知，本地通知正常处理
    if (notification.remote) {
      // 接下来我们自己处理，所以返回false阻止自动弹出
      return false;
    }
    return true;
  },
  // 其他配置...
});

iOS端配置 #

需要修改AppDelegate.m里的远程通知处理逻辑，把payload传递给RN层但不触发默认展示：

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  // 把通知数据传给RN的push-notification库
  [RNPushNotification didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
  // 这里不要调用系统默认的展示方法，交给RN层处理
}

另外别忘了在Info.plist里开启远程通知权限，并且后台模式勾选"Remote notifications"，不然杀后台可能收不到通知哦。

2. 提取Payload字段，生成自定义通知 #

在刚才的onNotification回调里，我们可以拿到远程通知的完整payload，不管是notification字段里的默认内容，还是data里的自定义字段，都能提取出来，然后按需组装成自己想要的通知样式：

PushNotification.configure({
  // 其他配置...
  onNotification: function(notification) {
    if (notification.remote) {
      // 从payload里抠出我们需要的字段，这里假设后端传了customData自定义对象
      const defaultTitle = notification.title;
      const defaultMessage = notification.message;
      const customDetails = notification.data?.customData; // 自定义字段

      // 组装自定义通知的配置，想加什么细节都可以
      const customNotificationConfig = {
        // 标题：优先用自定义的，没有就用默认
        title: customDetails?.customTitle || defaultTitle,
        // 内容：同理
        message: customDetails?.customMessage || defaultMessage,
        // 扩展样式：长文本、副标题这些都能加
        bigText: customDetails?.fullContent, // Android端展开显示的长文本
        subText: customDetails?.subtitle, // 通知副标题
        // 自定义数据：点击通知时能拿到这些内容
        userInfo: {
          ...customDetails,
          originalPayload: notification
        },
        // 样式配置：声音、震动、通知栏颜色
        soundName: 'default',
        vibrate: true,
        vibration: 300,
        color: '#2ECC71', // Android通知栏的背景色
        // Android必须的通知渠道（8.0+），得提前创建好
        channelId: 'custom_notification_channel',
        // iOS专属配置：比如分类、badge数
        category: 'CUSTOM_NOTIFICATION',
        badge: notification.badge || 0
      };

      // 触发我们自己的本地通知
      PushNotification.localNotification(customNotificationConfig);

      // 别忘了返回false阻止自动展示
      return false;
    }
    return true;
  },
  // 其他配置...
});

3. 关键注意点 #

• Android通知渠道：Android 8.0及以上必须创建专属的通知渠道，不然通知根本弹不出来。初始化的时候提前创建好：

PushNotification.createChannel(
  {
    channelId: "custom_notification_channel", // 必填，要和上面配置的一致
    channelName: "自定义通知", // 必填
    channelDescription: "用于展示自定义样式的通知", // 可选
    soundName: "default",
    importance: 4, // 1-5，5是最高优先级
    vibrate: true
  },
  (created) => console.log(`渠道创建结果：${created}`)
);

• 后端Payload格式：要确保后端发的payload里包含你需要的自定义字段，比如FCM的payload可以这么写：

{
  "to": "设备的推送令牌",
  "notification": {
    "title": "默认标题",
    "body": "默认内容"
  },
  "data": {
    "customData": {
      "customTitle": "我的自定义标题",
      "customMessage": "这是带更多细节的自定义内容",
      "fullContent": "这里是通知的完整内容，会在Android端展开显示",
      "subtitle": "通知副标题"
    }
  }
}

这样操作之后，不管应用是前台、后台还是被杀死，收到远程通知时都会按照你定制的样式弹出来，完全用上payload里的所有细节啦！

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