用于电容器本地通知的 npm

简介

电容器本地通知（Local Notifications）是指在移动设备的本地通知中心上展示的消息，而非通过推送服务远程推送到设备上的通知消息。本地通知可以在设备不在线时被缓存，并在设备重新连接到互联网后推送。本地通知通常被用于提醒用户完成某些操作、展示应用的最新内容等场景。

有许多 npm 可以用于在移动应用中集成电容器本地通知，如 react-native-push-notification、react-native-notifications、react-native-firebase 等等。本文将为大家介绍一个简洁易用、功能全面的 npm：react-native-local-notifications。

安装：

在 npm 中搜索 react-native-local-notifications，并按照以下方式安装：

npm install react-native-local-notifications --save

特点：

• 可以设置本地通知的各种属性，如 title、message、badge 等等
• 可以在应用启动时判定是否存在尚未展示的本地通知，如果有，则立即展示
• 可以接受用户对本地通知的响应，如点击、滑动、输入等等
• 可以在应用内部定制本地通知的行为，例如设置点击通知后打开某个页面、展示某段文本等等
• 可以在不同设备平台之间实现统一表现的本地通知

使用：

本地通知的展示流程可以概括如下：

• 创建并设置本地通知实例
• 调用 scheduleNotification 方法创建并立即调度本地通知
• 在应用启动时检查并展示尚未展示的本地通知
• 对用户的响应做出相应的处理

接下来我们会对这些步骤一一进行介绍。

创建本地通知实例

首先，我们需要进行单个或多个本地通知实例的创建：

import { Platform } from 'react-native';
import { PendingNotification } from 'react-native-local-notifications';

const myNotification = new PendingNotification({
  title: 'My Notification Title',
  body: 'This is the body of my notification',
  data: { custom: 'data' },
  ios: {
    sound: true,
  },
  android: {
    channelId: 'my-channel-id',
  },
});

其中：

• title 属性设置通知标题
• body 属性设置通知正文
• data 属性为开发者提供了一个可以附加到本地通知中的任何自定义数据，以便在用户与通知进行交互时使用
• ios 属性用于在 iOS 平台上设置通知属性，如设置是否有声音、是否震动等
• android 属性用于在 Android 平台上设置通知属性，如设置通知的渠道、通知的颜色等等。更多属性可以查看官方文档中的详细介绍

调度本地通知

对于单个本地通知，可以使用 scheduleNotification 方法快速进行调度：

// 引入 npm
import { LocalNotifications } from 'react-native-local-notifications';

// 调度通知
LocalNotifications.scheduleNotification(myNotification);

调用 scheduleNotification 方法后，该本地通知将会立即进入待展示队列，并在到达指定的展示时间时自动被展示。

在应用启动时检查本地通知

当应用启动时，可以通过调用以下方法检查那些尚未被展示的本地通知：

const pendingNotifs = await LocalNotifications.getPendingNotifications();

该方法返回一个 Promise，如果没有尚未展示的通知，则 resolve 的结果为一个空数组。

然后，你可以遍历 pendingNotifs 数组，按照你的需求调用 scheduleNotification 方法，并将本地通知立即调度以展示不在待展示队列中的通知。

响应用户的交互

对于本地通知的响应，可以通过监听应用的 'notificationResponseReceived' 事件来获取通知的相关信息：

import { DeviceEventEmitter } from 'react-native';

DeviceEventEmitter.addListener('notificationResponseReceived', response => {
  console.log('User action received', response);
});

response 对象包含了一些有用的信息，例如用户响应的行为（点击、滑动等等）、被点击通知的标题和正文、通过 data 属性传递给本地通知的数据对象等等。

在接受到用户的响应之后，我们就可以根据相应的行为做出相应的处理，例如打开某个页面、展示某段文本等等。

总结

react-native-local-notifications 可以帮助我们快速实现在移动应用中集成电容器本地通知，其具备简洁易用、功能全面的优点，并且可以支持多个设备平台的统一表现。希望该 npm 能为广大开发者在开发中提供更好的支持！

链接

• 仓库地址 ： https://github.com/prscX/react-native-local-notifications
• 文档地址 ： https://prscx.github.io/react-native-local-notifications/