npm 包 wjx-react-native-aliyun-push 使用教程

简介

wjx-react-native-aliyun-push 是一个基于 React Native 框架的 Aliyun 推送模块。使用此模块可以在 React Native 中轻松地集成 Aliyun 推送服务,实现消息推送功能。本文将为大家介绍如何使用此 npm 包实现 Aliyun 消息推送。

安装

1. 安装 npm 包

在 React Native 项目中,使用 npm 包管理工具,直接执行如下命令进行安装:

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

2. 链接 Native 代码

使用 npm 包之后,在 React Native 项目中还需要手动链接 Native 代码。具体操作如下:

iOS 平台

进入项目目录下,执行如下命令:

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

注意,如果您的 React Native 版本低于 0.60,需要手动执行以下命令:

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

手动生成配置文件,并按照官方文档描述集成代码。

Android 平台

本模块只需在 android/app/build.gradle 文件中添加以下依赖库引用:implementation 'com.aliyun.mns:x.x.x'。x.x.x 是阿里云 MNS SDK 版本号,具体版本号请查看 npm 包说明文档。

使用

1. 配置

在 React Native 项目中使用该模块之前,需要首先配置模块:

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

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

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

其中,registerAccount 函数是为了开启阿里云推送账号服务。账号是根据设备来统计的,每次调用 registerAccount 都会将之前的账号覆盖,如果不需要使用账号服务,可以不调用此函数。

2. 监听事件

在配置完成之后,就可以监听事件了,例如在消息推送时,会触发 messageReceived 事件:

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

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

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

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

超级推送消息的 Payload:

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

3. 推送

调用 pushMessage 接口可以推送消息:

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

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

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

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

-------

其中,data 字段是消息体,可以自定义结构;target 字段是推送目标,可以选择 DEVICE(设备) 或 ACCOUNT(账户);targetValue 字段是推送目标值,可以是设备 ID 或者账号;messageType 字段是消息类型,可以选择 MESSAGE 或者 NOTICE。

总结

本文介绍了 wjx-react-native-aliyun-push 模块的安装、配置、事件监听和推送操作,希望对大家了解如何在 React Native 中使用 Aliyun 推送服务有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005730381e8991b448e92c0


猜你喜欢

  • npm 包 m-o 使用教程

    在前端开发中,经常需要使用各种 npm 包来辅助开发。其中,m-o 是一个实用的包,它提供了一些常用的功能,比如本地存储、行为跟踪等等。 本文将介绍如何使用 m-o 包,包含安装、引用、具体功能以及示...

    3 年前
  • npm 包 simple-ux 使用教程

    简介: simple-ux 是一个轻量且易用的前端 UI 库,由业界前端名家打造,它包含了一系列常用的 UI 组件,可以帮助前端工程师更快速地开发出优秀的 Web 界面。

    3 年前
  • npm 包 gitbook-plugin-mathjax-update-cdn 使用教程

    介绍 Gitbook 是一个基于 Markdown 构建的文档系统,支持生成多种文档格式,如 html、pdf、epub 等。而 npm 是 Node.js 的包管理器,提供了丰富的包资源供开发者使用...

    3 年前
  • npm 包 custom-native-settings 使用教程

    在移动应用开发中,我们经常需要在原生应用中访问设备的一些本地设置,如屏幕亮度、声音大小、网络类型等。而这些设置在不同的操作系统上都有各自的 API 接口,开发者需要编写平台特定的代码来访问这些设置。

    3 年前
  • npm 包 x-err 使用教程

    作为前端开发者,我们经常会遇到各种各样的错误。为了更高效地处理错误信息,我们可以使用 npm 包 x-err。本文将介绍 npm 包 x-err 的使用方法。 什么是 x-err x-err 是一个用...

    3 年前
  • npm 包 pkjs-dep-names 使用教程

    简介 在前端开发中,我们经常需要使用 npm 包来扩展我们的项目。pkjs-dep-names 是一个非常有用的 npm 包,它可以帮助我们快速地查看一个项目所依赖的所有包的名称以及版本号。

    3 年前
  • npm 包 react-pagimagic 使用教程

    介绍 React-pagimagic 是一款基于 React 的分页组件库,它能够帮助我们快速地实现数据分页,提高我们的开发效率。在本文中,我们将详细介绍如何使用 react-pagimagic 组件...

    3 年前
  • npm 包 header-bar 使用教程

    什么是 header-bar? header-bar 是一个基于 React 的组件库,可用于快速构建具有头部导航栏的 Web 页面。无需从头开始编写导航等常见组件,header-bar 可以更为方便...

    3 年前
  • npm 包 insomnia-plugin-randomnumber 使用教程

    在前端开发过程中,我们经常需要模拟一些随机数来测试数据的处理逻辑。此时,一个能够方便地生成随机数的工具会大有裨益。今天,我们就来介绍一款名为 insomnia-plugin-randomnumber ...

    3 年前
  • npm 包 kandanviel2-ngx-cli-library 使用教程

    简介 kandanviel2-ngx-cli-library 是一个基于 Angular CLI 构建的前端组件库,提供了一系列可复用的 UI 组件和实用工具函数,可以帮助前端开发者快速构建高质量的 ...

    3 年前
  • npm 包 @darkobits/is-dev 使用教程

    简介 @darkobits/is-dev 是一款轻巧的 npm 包,用于检测当前程序是否运行在开发环境或生产环境。如果程序运行在开发环境,该包将返回 true,否则返回 false。

    3 年前
  • npm 包 generator-node-express-typescript-g 使用教程

    在前端开发中,如何快速搭建 Web 应用程序的框架是一个值得探讨的话题。为了实现这个目标,我们可以使用 npm 包管理器提供的 generator-node-express-typescript-g ...

    3 年前
  • npm 包 qpid-dispatch-console-config 使用教程

    介绍 qpid-dispatch-console-config 是一个用于配置 Apache Qpid Dispatch Router 控制台的 npm 包。它可以帮助你快速搭建一个功能完备的 Qpi...

    3 年前
  • npm 包 aframe-tooltip-component 使用教程

    简介 aframe-tooltip-component 是一个基于 A-Frame 开发的组件,可以用于在 3D 场景中添加工具提示。它可以自定义提示框的样式、位置、提示文字等。

    3 年前
  • npm 包 custom-events 使用教程

    前端开发中,事件机制是非常重要的一部分,而 npm 包 custom-events 就是一个非常方便的管理事件的工具。本文将详细介绍 custom-events 的使用教程,帮助你更好地理解和使用它。

    3 年前
  • npm 包 rikkei-module-compiler 使用教程

    在前端开发中,我们经常会使用到一些第三方库或框架,而 npm 这个包管理工具则成为了前端开发中必不可少的一部分。而基于 npm 可以轻松安装和使用的一些库中,npm 包 rikkei-module-c...

    3 年前
  • npm 包 retryx 使用教程

    在开发 Web 应用程序中,我们有时会遇到某些情况下请求失败的问题,比如网络不稳定、请求超时等等。这时候我们需要对请求进行重试,以保证用户能够正常地获得数据。在这种情况下,我们可以使用 retryx,...

    3 年前
  • npm 包 @subosito/prettierrc 使用教程

    前端开发人员在进行代码编辑时,为了保证代码的排版和格式的一致性,通常会使用 prettier 工具对代码进行自动格式化。而在 prettier 工具中,则需要 .prettierrc 文件来配置 pr...

    3 年前
  • NPM 包 react-native-baidu-echarts 使用教程

    在 React Native 开发中,常常需要利用可视化来帮助用户更好地理解数据。而 react-native-baidu-echarts 库是一个基于百度 ECharts 封装的组件库,能够使 Re...

    3 年前
  • npm 包 react-vertical-menu 使用教程

    在前端开发中,我们经常需要使用菜单组件来实现网站或应用的导航功能。而使用 npm 包 react-vertical-menu 可以方便地实现垂直菜单,使网站或应用更加美观和易于操作。

    3 年前

相关推荐

    暂无文章