如何在新通知到达时清除已送达通知？（react-native-push-notifications）

Absolutely! You can definitely implement this behavior using react-native-push-notifications. The core idea is to hook into the notification reception callback, clear all existing delivered notifications first, then display the new one. Here's how to do it step by step:

Step 1: Leverage the onNotification callback #

The library provides an onNotification handler that triggers whenever a new notification (local or remote) is received. This is where you'll add your logic to clear old notifications before showing the new one.

Step 2: Cross-platform clearing logic #

There are slight differences between iOS and Android when it comes to clearing delivered notifications, so you'll want to handle both cases:

• For iOS: Use PushNotificationIOS.removeAllDeliveredNotifications() to clear all notifications from the system notification center.
• For Android: Use PushNotification.cancelAllNotifications() to remove all active notifications (both local and remote).

Step 3: Complete code example #

Here's a configuration snippet that brings this logic together:

import PushNotification from 'react-native-push-notifications';
import PushNotificationIOS from '@react-native-community/push-notification-ios';
import { Platform } from 'react-native';

PushNotification.configure({
  // Basic registration handler (adjust for your setup)
  onRegister: function(token) {
    console.log('Device Token:', token);
  },

  // The core handler for our notification logic
  onNotification: function(notification) {
    // First, clear all existing delivered notifications
    if (Platform.OS === 'ios') {
      PushNotificationIOS.removeAllDeliveredNotifications();
    } else {
      PushNotification.cancelAllNotifications();
    }

    // Then display the new notification
    PushNotification.localNotification({
      title: notification.title || 'New Alert',
      message: notification.message || 'You have a new update',
      channelId: 'primary-notifications', // Required for Android API >= 26
      // Add custom parameters like icon, sound, or data as needed
    });

    // Required for iOS: Finish the notification to avoid system issues
    if (Platform.OS === 'ios') {
      notification.finish(PushNotificationIOS.FetchResult.NoData);
    }
  },

  // Permission configuration (tweak based on your needs)
  permissions: {
    alert: true,
    badge: true,
    sound: true,
  },

  popInitialNotification: true,
  requestPermissions: true,
});

Key considerations #

• Android Notification Channels: For Android 8.0+, you must create a notification channel before displaying notifications. Use PushNotification.createChannel() to set this up during app initialization.
• Background Triggering: For remote notifications received while the app is in the background, ensure your platform-specific configurations are correct (e.g., Android broadcast receivers, iOS push entitlements) to guarantee the onNotification callback fires.
• Remote vs Local: This logic works seamlessly for both local notifications you generate in-app and remote push notifications from FCM/APNs.

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