npm 包 jpush-custom-react-native 使用教程

阅读时长 15 分钟读完

简介

jpush-custom-react-native 是一个用于 React Native 框架的推送插件。JPush(极光推送)是一款专业的推送服务,它提供了一系列高效、可靠的推送解决方案,如广播推送、别名推送、标签推送、自定义键值对推送等等。

在本教程中,我们将讲解如何使用 jpush-custom-react-native 插件在 React Native 项目中实现极光推送的功能。

安装

通过 npm 安装 jpush-custom-react-native 插件:

配置

Android

  1. 在 Android 项目中找到 AndroidManifest.xml 文件,在里面加入以下权限:

    -- -------------------- ---- -------
    ---- ------- ---
    ---------------- -------------------------------------------------------- --
    ---------------- ------------------------------------------------------ --
    ---------------- --------------------------------------------------- --
    ---------------- -------------------------------------------------- --
    ---------------- ----------------------------------------- --
    ---------------- -------------------------------------------------------- --
    ---------------- -------------------------------------------------------- --
    ---------------- ------------------------------------------------------ --
    ---------------- ---------------------------------------- --
    ---------------- ---------------------------------------------- --
    ---------------- ------------------------------------------------------- --
    ---------------- ----------------------------------------------- --
    ---------------- ---------------------------------------------- --
    ---------------- ------------------------------------------------ --
  2. 在 AndroidManifest.xml 文件的 application 标签中加入以下 meta-data:

    其中,YOUR_APP_KEY 和 YOUR_CHANNEL 分别为你在极光推送控制台上创建的应用的 AppKey 和 Channel。

  3. 在 AndroidManifest.xml 文件的 application 标签中加入以下 service:

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

    上面这段代码会监听 jpush 推送服务的各种事件,并根据事件类型来做出相应的操作。

  4. 在 AndroidManifest.xml 文件的 application 标签中加入以下 receiver:

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

    这一段代码将监听 jpush 的各种广播事件,包括接收到消息、打开通知、网络连接状态变化等等。

  5. 在你的 React Native 项目的 MainActivity.java 文件中加入以下代码:

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

    这里定义了两个生命周期方法 onResume 和 onPause,在这里调用 JPushInterface 的 onResume 和 onPause 方法,以便 jpush 能够正确地处理活动状态。

iOS

  1. 在 Xcode 中打开你的 iOS 项目,找到你的项目文件夹,右击,选择 New File,然后选择 Property List。在弹出的窗口中选择 Information Property List。

  2. 在你刚刚创建的 Info.plist 文件中,添加以下 key-value:

    其中,YOUR_APP_KEY 为你在极光推送控制台上创建的应用的 AppKey。

  3. 在你的 AppDelegete.m 文件中加入以下代码:

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

    上面这段代码实现了 JPush SDK 的初始化、设备 token 的注册、接收远程推送消息并做出相应的响应。需要特别注意的是,在应用在前台接收到远程推送消息、或者应用从后台进入前台时,需要取消通知栏显示的未读消息数。

使用

查看设备 ID

你可以使用以下代码查看设备 ID:

发送本地通知

你可以使用以下代码发送本地通知:

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

发送推送消息

你可以使用以下代码发送推送消息:

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

接收推送消息

你可以使用以下代码在 React Native 项目中接收推送消息:

上面这段代码中,我们使用了一个 Alert 对话框,以便查看接收到的消息内容。实际使用时,你可以将消息存入数据库或者业务系统中,以便做出相应的操作。

总结

本文主要介绍了如何使用 jpush-custom-react-native 插件在 React Native 项目中实现极光推送的功能。我们分别详细讲解了在 Android 和 iOS 平台的配置方法,以及如何使用 jpush-custom-react-native 插件发送本地通知和推送消息,接收推送消息等等。

相信通过本篇文章的学习,你已经能够掌握 jpush-custom-react-native 插件的使用方法,并在实际项目中应用它来实现极光推送功能。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005536d81e8991b448d0a0d

纠错
反馈