react-native - 如何在 native react 中显示图标上的通知计数？

Question

你如何在一个图标上显示通知计数，像照片一样 react 原生？

Answer 1

由于 React Native 已经弃用了他们的 PushNotificationIOS 库，你将不得不探索其他选项。
Android(背景/前景/被杀)和 iOS(背景/前景)
对于 Android 8 及更高版本的设备，启动器图标将默认显示事件通知的通知标记 (source from Android)。用于更新 上的徽章图标应用程序运行时的 iOS (在前台或后台)您可以使用像 react-native-push-notification 这样的包, @react-native-community/push-notification-ios ，或以前付费的服务现在免费@notifee/react-native .它们都将具有类似于以下的方法:

//in onNotification handler
PushNotification.getApplicationIconBadgeNumber(badgeNumber => {
  PushNotificationIOS.setApplicationIconBadgeNumber(badgeNumber + 1)
})

其中一些可能声称适用于 Android，但请谨慎使用。由于每个启动器都不同，三星的行为可能与具有这些库之一的 Google Pixel 不同。例如，在运行 Android 10 的三星 S9 上，当用户清除其通知托盘时，从您的应用中手动设置徽章图标编号将被覆盖。
iOS(被杀)
用于更新 的徽章图标应用程序被杀死时的 iOS ，您必须使用带有徽章属性的“嘈杂”远程通知，或者需要更多配置的“静默”远程通知。
嘈杂的远程通知
这些类型的远程通知会立即显示给用户，并包含 data带有 aps 的属性属性(property)。嘈杂的通知可以自行更新您的徽章图标，而无需唤醒您的应用程序以运行任何代码。有效载荷示例:

{
  "aps": {
    "alert": {
      "body": "the body text",
      "title": "the title"
    },
    "badge": 6,
  }
}

在这种方法中，您的后端服务将跟踪徽章编号应该是什么。您可能希望实现一些功能，如果用户打开通知或以某种方式与您的应用程序交互，则应用程序将对您的后端服务进行 api 调用以调整/减少该用户的徽章编号。
静音远程通知
有一种方法可以静默唤醒您的应用并在后台更新它 ( docs)。这不会通知用户，因此如果这是您想要的结果，则由您触发本地通知。也不能保证用户会收到此通知，例如他们的设备是否电池电量不足或服务因您试图每小时发送太多更新而受到限制。据我所知，您必须使用我上面提到的第三方软件包之一更新徽章图标编号，因为此处无法识别有效负载上的徽章属性。要实现此方法，首先在 Xcode 中打开您的项目，选择您的目标项目，然后在 Signing & Capability 选项卡中，添加 Background Modes 功能，然后选择 Remote notification 复选框。这些通知的有效负载如下所示:

aps: {
  // Important to receive the silent notification
  'content-available': 1,
          
   alert: {
     title: notification.title,
     body: notification.text,
   },
}

这种方法似乎有很多注意事项，所以我强烈建议开发人员阅读上面链接的文档。