简介
jpush-custom-react-native 是一个用于 React Native 框架的推送插件。JPush(极光推送)是一款专业的推送服务,它提供了一系列高效、可靠的推送解决方案,如广播推送、别名推送、标签推送、自定义键值对推送等等。
在本教程中,我们将讲解如何使用 jpush-custom-react-native 插件在 React Native 项目中实现极光推送的功能。
安装
通过 npm 安装 jpush-custom-react-native 插件:
npm install jpush-custom-react-native --save
配置
Android
在 Android 项目中找到 AndroidManifest.xml 文件,在里面加入以下权限:
-- -------------------- ---- ------- ---- ------- --- ---------------- -------------------------------------------------------- -- ---------------- ------------------------------------------------------ -- ---------------- --------------------------------------------------- -- ---------------- -------------------------------------------------- -- ---------------- ----------------------------------------- -- ---------------- -------------------------------------------------------- -- ---------------- -------------------------------------------------------- -- ---------------- ------------------------------------------------------ -- ---------------- ---------------------------------------- -- ---------------- ---------------------------------------------- -- ---------------- ------------------------------------------------------- -- ---------------- ----------------------------------------------- -- ---------------- ---------------------------------------------- -- ---------------- ------------------------------------------------ --
在 AndroidManifest.xml 文件的 application 标签中加入以下 meta-data:
<meta-data android:name="JPUSH_APPKEY" android:value="YOUR_APP_KEY" /> <meta-data android:name="JPUSH_CHANNEL" android:value="YOUR_CHANNEL" />
其中,YOUR_APP_KEY 和 YOUR_CHANNEL 分别为你在极光推送控制台上创建的应用的 AppKey 和 Channel。
在 AndroidManifest.xml 文件的 application 标签中加入以下 service:
-- -------------------- ---- ------- -------- --------------------------------------------------- ---------------------- ------------------------ - -------------- - ------- ----------------------------------------------- -- ------- --------------------------------------------- -- ------- -------------------------------------------------- -- ------- ------------------------------------------------ -- ---------------- ----------
上面这段代码会监听 jpush 推送服务的各种事件,并根据事件类型来做出相应的操作。
在 AndroidManifest.xml 文件的 application 标签中加入以下 receiver:
-- -------------------- ---- ------- --------- ---------------------------------------------------- ---------------------- - -------------- ----------------------- - ------- ------------------------------------------------------------------ -- --------- ------------------------------- -- ---------------- --------------- ------- --------------------------------------------------- -- ------- ----------------------------------------------------- -- ------- ------------------------------------------------------- -- ------- ------------------------------------------------------------ -- ------- ---------------------------------------------------------- -- ------- --------------------------------------------------------------- -- --------- ------------------------------- -- ---------------- --------------- ------- ------------------------------------------------- -- --------- ------------------------------- -- ---------------- --------------- ------- --------------------------------------------------- -- --------- ------------------------------- -- ---------------- --------------- ------- -------------------------------------------------- -- ------- ---------------------------------------------------- -- ----- ------------------------ -- ---------------- -----------
这一段代码将监听 jpush 的各种广播事件,包括接收到消息、打开通知、网络连接状态变化等等。
在你的 React Native 项目的 MainActivity.java 文件中加入以下代码:
-- -------------------- ---- ------- ------ ------------------------------------ ------ ----- ------------ ------- ------------- - --------- --------- ---- ---------- - ----------------- ------------------------------ - --------- --------- ---- --------- - ---------------- ----------------------------- - -
这里定义了两个生命周期方法 onResume 和 onPause,在这里调用 JPushInterface 的 onResume 和 onPause 方法,以便 jpush 能够正确地处理活动状态。
iOS
在 Xcode 中打开你的 iOS 项目,找到你的项目文件夹,右击,选择 New File,然后选择 Property List。在弹出的窗口中选择 Information Property List。
在你刚刚创建的 Info.plist 文件中,添加以下 key-value:
<key>CFBundleIdentifier</key> <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string> <key>JPUSH_APPKEY</key> <string>YOUR_APP_KEY</string> <key>UIBackgroundModes</key> <array> <string>remote-notification</string> </array>
其中,YOUR_APP_KEY 为你在极光推送控制台上创建的应用的 AppKey。
在你的 AppDelegete.m 文件中加入以下代码:
-- -------------------- ---- ------- ------- ------------------------------------ ------- --------------- --------------- ----------- - -------------------------------- ------------- ------------------------------------------- --------------- - -- --- ----- --- ------------- ----------------------------- ---------------------- ------------------ --------------------- ------ ---- - -- -------- - -------------------------------- ------------- --------------------------------------------------------------- ---------------------- - ------------ -------------------------------- - -- -- ----------- - -------------------------------- ------------- -------------------------------------------------------- ------------- - ------------- --------------------------------- - -- -------- - -------------------------------- ------------- ------------------------------------------ ---------- - -- ---------- --- -------------- ------------- ----------------------------------- - -- ----------------------------------------- - -------------------------------- ------------- ------------------------------------------ ---------- ---------------------------- ---------------------------------------------- - -- ---------- --- -------------- ------------- ----------------------------------- -- -- ---------------- -------------------------------------------------- - -- ----------------------- - -------------------------------- ------------- ------------------------------------------ ---------- ---------------------------- ---------------------------------------------- - ------------- ----------------------------------- -------------------------------------------------- - -- --------------- - --------------------------------------------------- ------------- - ------------- ------------ -- ------------- --------------- ------------------ ----------------------------- - -- ------------------ - --------------------------------------------- ------------- - --------------- ------------------ ----------------------------- - ----
上面这段代码实现了 JPush SDK 的初始化、设备 token 的注册、接收远程推送消息并做出相应的响应。需要特别注意的是,在应用在前台接收到远程推送消息、或者应用从后台进入前台时,需要取消通知栏显示的未读消息数。
使用
查看设备 ID
你可以使用以下代码查看设备 ID:
import JPush from 'jpush-custom-react-native'; JPush.getRegistrationID(registrationID => { console.log(registrationID); });
发送本地通知
你可以使用以下代码发送本地通知:
-- -------------------- ---- ------- ------ ----- ---- ---------------------------- -------------- -------- -- -- -- -- --- -- -- ----- -- ------ ------- -- ---- -------- ------- -- ---- ------ - ----- --------- -- -- ------- --------- --- ---------------- -- ---- ---
发送推送消息
你可以使用以下代码发送推送消息:
-- -------------------- ---- ------- ------ ----- ---- ---------------------------- ----------------------------- ------- -- -- ---- ------ ------- -- ---- -------- ------- -- ---- --------- ---------- -- --------- ------- - --- ------- - ----- --------- -- -- ------- ------------------ -------- -- ----- -------------------- ------- -- ----- ---
接收推送消息
你可以使用以下代码在 React Native 项目中接收推送消息:
import { Alert } from 'react-native'; import JPush from 'jpush-custom-react-native'; JPush.addReceiveCustomMsgListener(message => { Alert.alert('消息接收', JSON.stringify(message)); });
上面这段代码中,我们使用了一个 Alert 对话框,以便查看接收到的消息内容。实际使用时,你可以将消息存入数据库或者业务系统中,以便做出相应的操作。
总结
本文主要介绍了如何使用 jpush-custom-react-native 插件在 React Native 项目中实现极光推送的功能。我们分别详细讲解了在 Android 和 iOS 平台的配置方法,以及如何使用 jpush-custom-react-native 插件发送本地通知和推送消息,接收推送消息等等。
相信通过本篇文章的学习,你已经能够掌握 jpush-custom-react-native 插件的使用方法,并在实际项目中应用它来实现极光推送功能。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005536d81e8991b448d0a0d