npm 包 @hai5/react-native-onesignal 使用教程

介绍

在移动应用开发中，推送通知是一项非常重要的功能，它能够及时将信息传递给用户并提高用户体验。而 @hai5/react-native-onesignal 正是一个基于 React Native 的 OneSignal 推送通知插件。

本文将介绍如何使用 @hai5/react-native-onesignal 实现推送通知功能，并提供示例代码作为参考。

安装

通过 npm 安装 @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 文件中添加以下代码：

------- ------------------------------------------------------

然后，在 OneSignal 管理后台中，将 REMOTE 替换为你的 GCM/FCM 发送 ID。

添加 OneSignal 应用信息

在 AndroidManifest.xml 文件中，添加以下代码：

--------- ----------------------------------------------------------
  ------------------------------
  -------------
    ----------
      -------------------------------
      ----------------------------------- --
    ----------
      ----------------------------------------------
      -------------------------------------------------- --
  --------------
-----------

将 <YOUR_PACKAGE_NAME> 替换为你的应用包名。

iOS 平台

添加 OneSignal App ID

你需要在 OneSignal 上创建一个应用，获取到应用的 App ID。然后，在 ios/<PROJECT_NAME>/Info.plist 文件中添加以下代码：

---------------------------
--------------------------------------

将 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

当用户接收到推送通知时，会触发该事件。

----------------------------------------------------- -- -
  ------------------------- --------- -- --------------
---

其中 notification 对象包含以下信息：

属性 类型 描述
notification Object 包含推送通知的内容，如标题 title、内容 body、图标 smallIcon 等。
displayType Number 推送通知的类型。以下是可能的取值：
0 - None
1 - In App Alert
2 - Notification
3 - Notification with Image
4 - In App Message
5 - Background Notification
6 - Silent Notification
payload Object 包含推送通知的二进制数据。
isAppInFocus Boolean 表示当前应用是否处于前台运行状态。
displayed Boolean 表示推送通知是否已经被显示。如果已经被显示，则值为 true；否则值为 false。

setNotificationOpenedHandler

当用户点击推送通知时，会触发该事件。

------------------------------------------------- -- -
  ------------------------- ------- -- ------------
---

其中 openResult 对象包含以下信息：

属性 类型 描述
notification Object 包含推送通知的内容，如标题 title、内容 body、图标 smallIcon 等。
action Object 包含用户点击推送通知时执行的行为，如打开某个应用程序页面 action.actionID 等。
notificationId String 推送通知的 ID。
additionalData Object 包含推送通知的附加数据。

操作

设置用户标识

-----------------------------------

我们可以使用 setExternalUserId 方法设置用户标识。当需要追踪用户信息时，这将非常有用。

发送自定义参数

------------------------ ---------
--------------------
  ----- ---------
  ----- ---------
---

我们可以使用 sendTag 和 sendTags 方法发送自定义参数。这对于衡量用户交互和行为等指标非常有用。

示例代码

------ ------ - --------- - ---- --------
------ --------- ---- -------------------------------
------ - ------ ------------- ----------- ----------- ----- ---------- ----------------- ---- - ---- ---------------

----- --- - -- -- -
  ------------ -- -
    -----------------------------------------
    ------------------------ ---
    ----------------------------------------------------- -- -
      ------------------------- --------- -- --------------
    ---
    ------------------------------------------------- -- -
      ------------------------- ------- -- ------------
    ---
  -- ----

  ----- --------------------------- - ----- -- -- -
    --- -
      ----- -----------------------------------
      ---------------------- --------- ---- -- --- ---- -------
    - ----- --- -
      -------------------- -- --- -------- ---- --- -- ---
      -------------------- ------- -- --- -------- ---- ------
    -
  --

  ----- -------------------- - ----- -- -- -
    --- -
      ----- ------------------------ ---------
      ---------------------- ---- --- ---- --------
    - ----- --- -
      -------------------- -- --- ---- -- ---
      -------------------- ------- -- --- -------
    -
  --

  ----- --------------------- - ----- -- -- -
    --- -
      ----- --------------------
        ----- ---------
        ----- ---------
      ---
      ---------------------- ----- ---- ---- --------
    - ----- --- -
      -------------------- -- --- ----- -- ---
      -------------------- ------- -- --- --------
    -
  --

  ------ -
    --------------
      ------------
        ----- -----------------------
          ----- ------------------------------------ ---- ---------
          ----------------- --------------------- --------------------------------------
            ----- ----------------------------- -------- ---- ---------
          -------------------
        -------
        ----- -----------------------
          ----- ---------------------------------------
          ----------------- --------------------- -------------------------------
            ----- ----------------------------- ----------
          -------------------
          ----------------- --------------------- --------------------------------
            ----- ----------------------------- -----------
          -------------------
        -------
      -------------
    ---------------
  --
--

----- ------ - -------------------
  -------- -
    ---------------- -------
    ------------------ -------
    ------------------ -------------------------
    --------------- -------
    --------------- -------------------------
    ------------- ---
    -------------- ---
    ------------ ---
    ------------- ---
    ----------- ---
  --
  ------------- -
    --------- ---
    ----------- -------
    ------------- --
  --
  ------- -
    ---------------- ----------
    ------------- --
    ------------- --
    -------- ---
    ------ -------
  --
  ----------- -
    ------ -------
    --------- ---
    ----------- -------
    ---------- ---------
  --
---

------ ------- ----

在这个示例代码中，我们定义了三个按钮：设置外部用户 ID、设置一个标签、设置多个标签。当用户按下这些按钮时，我们将使用 OneSignal 的相应方法设置用户信息，并在设置成功或失败时显示警报。用户可以在实际开发中使用这些方法，以便将 OneSignal 集成到他们的应用程序中。

总结

通过本文的介绍，我们了解了如何使用 @hai5/react-native-onesignal 实现推送通知功能。我们首先介绍了该插件的安装和配置步骤，然后详细介绍了其使用方法和相应的示例代码。希望本文能够对你在实际开发中使用该插件有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005728c81e8991b448e8c2e

阅读全文

猜你喜欢

  • npm 包 absolute-path-converter 使用教程

    在前端开发中，我们经常需要处理文件路径，使用绝对路径可以避免出现文件路径错误的情况。绝对路径一般是以根目录开头的路径，为了方便在文件中使用，我们通常会将相对路径转换为绝对路径。

    3 年前
  • npm 包 json-local-configurator 使用教程

    简介 json-local-configurator 是一个简单的 npm 包，可以帮助前端开发人员快速加载本地 JSON 配置文件，并提供简单的 API 进行配置参数的读写。

    3 年前
  • npm 包 fis3-postprocessor-webp 使用教程

    WebP 是一种由 Google 公司开发的新型图片格式，采用无损和有损双重压缩技术，相对于传统的 JPG 和 PNG 格式，WebP 可以更有效地减小图片文件大小，从而加速页面加载速度，提升用户体验...

    3 年前
  • npm 包 symbol-tostring 使用教程

    介绍 symbol-tostring 是一个方便字符串化 Symbol 的 npm 包，通过它，开发者可以将 Symbol 类型的变量方便地转化为字符串类型，方便存储和处理。

    3 年前
  • npm 包 ng-ax-path 使用教程

    前言 随着前端技术的不断发展，前端开发变得越来越重要，而随之而来的是开发效率的要求也越来越高。而 npm 包的使用，可以为我们的前端开发提供很多便利。在本文中，我们为大家介绍一个非常有用的 npm 包...

    3 年前
  • npm 包 makestatic-highlight 使用教程

    在前端开发中，经常需要处理代码高亮的问题。而 npm 包 makestatic-highlight 帮助我们快速地实现代码高亮功能，并且使用非常简单。本文将带领大家掌握 makestatic-high...

    3 年前
  • npm 包 makestatic-graph-resources 使用教程

    前言 在现代的 Web 开发中，静态资源的管理已经变得越来越重要。而 makestatic-graph-resources 就是一款用于生成静态资源的 npm 包。

    3 年前
  • npm 包 makestatic-http-cache 使用教程

    什么是 makestatic-http-cache？ makestatic-http-cache 是一个 Node.js 模块，它可以为静态文件添加 HTTP 缓存头，从而提高网站的访问速度。

    3 年前
  • npm 包 makestatic-inline-data 使用教程

    在前端开发中，我们经常需要处理一些静态资源，如图片、CSS、字体等。而这些资源都需要在部署前经过处理，以便能够更好地优化应用的性能。而 makestatic-inline-data 这个 npm 包就...

    3 年前
  • npm 包 makestatic-manifest 使用教程

    什么是 makestatic-manifest makestatic-manifest 是一个 npm 包，它提供了一种为静态文件生成资源映射的方式。它适用于需要手动管理静态资源的项目，可以帮助我们生...

    3 年前
  • npm 包 makestatic-optimize-css 使用教程

    前言 在前端开发过程中，为了加快网站页面的加载速度，我们通常会对样式表进行压缩优化处理。而 makestatic-optimize-css 是一个基于 Node.js 的 npm 包，它可以帮助我们将...

    3 年前
  • npm 包 makestatic-optimize-image 使用教程

    在前端开发中，图片是一个非常重要的部分，然而过大的图片会降低页面加载速度。为了解决这个问题，我们可以使用一些工具来优化和压缩图片。makestatic-optimize-image 就是一种很好的选择...

    3 年前
  • npm 包 makestatic-optimize-html 使用教程

    在进行前端开发时，我们通常需要优化网页的加载速度和性能。其中，HTML 是网页的基础，优化 HTML 可以带来很大的效果。为此，我们可以使用一个名为 makestatic-optimize-html ...

    3 年前
  • npm 包 makestatic-pack-webpack 使用教程

    在前端开发中，使用 npm 包已经成为了必不可少的部分。其中，有一款名为 makestatic-pack-webpack 的包在前端项目中有着非常重要的作用。本文将为你详细介绍 makestatic-...

    3 年前
  • npm 包 response-picker 使用教程

    在前端开发中，经常需要从一个 API 返回的数据中获取指定的属性值。这时，我们可以使用 npm 包 response-picker。 在本篇文章中，我们将深入学习 response-picker 的使...

    3 年前
  • npm 包 @logicalroute/logger 使用教程

    介绍 @logicalroute/logger 是一个方便的前端日志记录工具库，它提供了强大的功能，包括： 快捷记录日志信息 强制记录错误等级 支持多种格式（如 JSON 等） 自定义日志格式 链式...

    3 年前
  • npm 包 @write-for-christ/ms2unicode 使用教程

    什么是 @write-for-christ/ms2unicode @write-for-christ/ms2unicode 是一个用于将中文数字转换为 unicode 码的 npm 包。

    3 年前
  • npm 包 @logicalroute/apihealth 使用教程

    在前端开发中，我们常常需要与后端 API 交互，而有时 API 可能会出现一些问题，我们需要及时地识别和处理这些问题，以保证系统的正常运行。@logicalroute/apihealth 是一个用于检...

    3 年前
  • npm 包 denim-express-factory 使用教程

    简介 denim-express-factory 是一个npm包，它是为Express.js框架编写的一个工厂，它可以自动创建 router 和 controllers 以及其他常见的前端类组件，为开...

    3 年前
  • npm 包 github-corners 使用教程

    前言 随着互联网的发展和技术的进步，开源的工具和库层出不穷，其中，一个能够为网页增添点睛之笔的小工具是 Github Corners。它可以为你的网站添加一个漂亮的小图标，同时也可以为你的 Githu...

    3 年前

相关推荐

    暂无文章