介绍
在移动应用开发中，推送通知是一项非常重要的功能，它能够及时将信息传递给用户并提高用户体验。而 @hai5/react-native-onesignal 正是一个基于 React Native 的 OneSignal 推送通知插件。
本文将介绍如何使用 @hai5/react-native-onesignal 实现推送通知功能，并提供示例代码作为参考。
安装
通过 npm 安装 @hai5/react-native-onesignal：
npm install @hai5/react-native-onesignal
配置
安卓平台
添加 OneSignal App ID
首先，你需要在 OneSignal 上创建一个应用，获取到应用的 App ID。然后，在 android/app/build.gradle 文件中添加以下代码：
-- -------------------- ---- -------
---------- -
------- -
-----
-------------------- - -
----------------- ---------------------
-- ----- ------
-
-
----- -
-----
-------------------- - -
----------------- ---------------------
-- ----- ------
-
-
-将 <ONESIGNAL_APP_ID> 替换为你的 App ID。
添加 OneSignal 的 GCM/FCM 发送 ID
在 android/app/src/main/res/values/strings.xml 文件中添加以下代码：
<string name="onesignal_google_project_number">REMOTE</string>
然后，在 OneSignal 管理后台中，将 REMOTE 替换为你的 GCM/FCM 发送 ID。
添加 OneSignal 应用信息
在 AndroidManifest.xml 文件中，添加以下代码：
-- -------------------- ---- -------
--------- ----------------------------------------------------------
------------------------------
-------------
----------
-------------------------------
----------------------------------- --
----------
----------------------------------------------
-------------------------------------------------- --
--------------
-----------将 <YOUR_PACKAGE_NAME> 替换为你的应用包名。
iOS 平台
添加 OneSignal App ID
你需要在 OneSignal 上创建一个应用，获取到应用的 App ID。然后，在 ios/<PROJECT_NAME>/Info.plist 文件中添加以下代码：
<key>OneSignal_app_id</key> <string>YOUR_ONESIGNAL_APP_ID</string>
将 YOUR_ONESIGNAL_APP_ID 替换为你的 App ID。
添加 OneSignal 能力
在 Xcode 中，打开你的项目文件，选择相应的 target，点击 Capabilities 标签页，开启 Push Notifications 和 Background Modes（打开 Remote notifications 选项）能力。
使用
初始化
-- -------------------- ---- ------- ------ --------- ---- ------------------------------- -- --- --------- ----------------------------------------- -- - ------------------ ----- --- -- ------------------------ --- -- --------- ---- ----------------------------------------------------- -- - ------------------------- --------- -- -------------- --- ------------------------------------------------- -- - ------------------------- ------- -- ------------ --- -- -- --------- ---- -----------------------------------
在初始化时，我们使用 setAppId 方法传入我们在 OneSignal 上创建应用时获取的 App ID。除此之外，我们还可以通过 setLogLevel 方法设置 OneSignal 日志级别。
事件监听
OneSignal 支持监听 setNotificationReceivedHandler 和 setNotificationOpenedHandler 两个事件。
setNotificationReceivedHandler
当用户接收到推送通知时，会触发该事件。
OneSignal.setNotificationReceivedHandler(notification => {
console.log('Notification received: ', notification);
});其中 notification 对象包含以下信息：
| 属性 | 类型 | 描述 |
|---|---|---|
notification |
Object |
包含推送通知的内容，如标题 title、内容 body、图标 smallIcon 等。 |
displayType |
Number |
推送通知的类型。以下是可能的取值：0 - None1 - In App Alert2 - Notification3 - Notification with Image4 - In App Message5 - Background Notification6 - Silent Notification |
payload |
Object |
包含推送通知的二进制数据。 |
isAppInFocus |
Boolean |
表示当前应用是否处于前台运行状态。 |
displayed |
Boolean |
表示推送通知是否已经被显示。如果已经被显示，则值为 true；否则值为 false。 |
setNotificationOpenedHandler
当用户点击推送通知时，会触发该事件。
OneSignal.setNotificationOpenedHandler(openResult => {
console.log('Notification opened: ', openResult);
});其中 openResult 对象包含以下信息：
| 属性 | 类型 | 描述 |
|---|---|---|
notification |
Object |
包含推送通知的内容，如标题 title、内容 body、图标 smallIcon 等。 |
action |
Object |
包含用户点击推送通知时执行的行为，如打开某个应用程序页面 action.actionID 等。 |
notificationId |
String |
推送通知的 ID。 |
additionalData |
Object |
包含推送通知的附加数据。 |
操作
设置用户标识
OneSignal.setExternalUserId('123');我们可以使用 setExternalUserId 方法设置用户标识。当需要追踪用户信息时，这将非常有用。
发送自定义参数
OneSignal.sendTag('key', 'value');
OneSignal.sendTags({
key1: 'value1',
key2: 'value2',
});我们可以使用 sendTag 和 sendTags 方法发送自定义参数。这对于衡量用户交互和行为等指标非常有用。
示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- -------------------------------
------ - ------ ------------- ----------- ----------- ----- ---------- ----------------- ---- - ---- ---------------
----- --- - -- -- -
------------ -- -
-----------------------------------------
------------------------ ---
----------------------------------------------------- -- -
------------------------- --------- -- --------------
---
------------------------------------------------- -- -
------------------------- ------- -- ------------
---
-- ----
----- --------------------------- - ----- -- -- -
--- -
----- -----------------------------------
---------------------- --------- ---- -- --- ---- -------
- ----- --- -
-------------------- -- --- -------- ---- --- -- ---
-------------------- ------- -- --- -------- ---- ------
-
--
----- -------------------- - ----- -- -- -
--- -
----- ------------------------ ---------
---------------------- ---- --- ---- --------
- ----- --- -
-------------------- -- --- ---- -- ---
-------------------- ------- -- --- -------
-
--
----- --------------------- - ----- -- -- -
--- -
----- --------------------
----- ---------
----- ---------
---
---------------------- ----- ---- ---- --------
- ----- --- -
-------------------- -- --- ----- -- ---
-------------------- ------- -- --- --------
-
--
------ -
--------------
------------
----- -----------------------
----- ------------------------------------ ---- ---------
----------------- --------------------- --------------------------------------
----- ----------------------------- -------- ---- ---------
-------------------
-------
----- -----------------------
----- ---------------------------------------
----------------- --------------------- -------------------------------
----- ----------------------------- ----------
-------------------
----------------- --------------------- --------------------------------
----- ----------------------------- -----------
-------------------
-------
-------------
---------------
--
--
----- ------ - -------------------
-------- -
---------------- -------
------------------ -------
------------------ -------------------------
--------------- -------
--------------- -------------------------
------------- ---
-------------- ---
------------ ---
------------- ---
----------- ---
--
------------- -
--------- ---
----------- -------
------------- --
--
------- -
---------------- ----------
------------- --
------------- --
-------- ---
------ -------
--
----------- -
------ -------
--------- ---
----------- -------
---------- ---------
--
---
------ ------- ----在这个示例代码中，我们定义了三个按钮：设置外部用户 ID、设置一个标签、设置多个标签。当用户按下这些按钮时，我们将使用 OneSignal 的相应方法设置用户信息，并在设置成功或失败时显示警报。用户可以在实际开发中使用这些方法，以便将 OneSignal 集成到他们的应用程序中。
总结
通过本文的介绍，我们了解了如何使用 @hai5/react-native-onesignal 实现推送通知功能。我们首先介绍了该插件的安装和配置步骤，然后详细介绍了其使用方法和相应的示例代码。希望本文能够对你在实际开发中使用该插件有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728c81e8991b448e8c2e