react-native使用leanclound消息推送的方法
ios消息推送的基本流程
1.注册:为应用程序申请消息推送服务。此时你的设备会向apns服务器发送注册请求。2. apns服务器接受请求,并将devicetoken返给你设备上的应用程序 3.客户端应用程序将devicetoken发送给后台服务器程序,后台接收并储存。 4.后台服务器向apns服务器发送推送消息 5.apns服务器将消息发给devicetoken对应设备上的应用程序
使用leanclound进行消息推送
优势:文档清晰,价格便宜
接入leanclound
1.首先需要创建一个react-native项目
react-native init projectname
2.在leancloud创建一个同名项目,并记录好appid和appkey
3.项目创建成功后,安装推送所需的模块(需要cd到工程目录)
1.使用yarn安装
yarn add leancloud-storage yarn add leancloud-installation
2.使用npm安装
npm install leancloud-storage --save npm install leancloud-installation --save
4.在项目目录下新建一个文件夹,名字为pushservice,在里面添加一个js文件pushservice.js,处理消息推送的逻辑,
1.在index.js初始化leanclound
import av from 'leancloud-storage' ... /* *添加注册的appid和appkey */ const appid = 'ht23ehddzafflk9imtdl10te-gzgzohsz' const appkey = 'tyicpb5kkemj7xdyzwpgifta' /* *初始化 */ av.initialize(appid,appkey); /* *把installation设为全局变量,在其他文件方便使用 */ global.installation = require('leancloud-installation')(av); ...
2.ios端配置
首先,在项目中引入rctpushnotification,详情请参考: linking libraries - react native docs
步骤一:将pushnotification项目拖到ios主目录,pushnotification路径:当前项目/node_modules/react-native/libraries/pushnotificationios目录下
步骤二:添加librctpushnotification静态库,添加方法:工程targets-build phases-link binary with libraries 点击添加,搜索librctpushnotification.a并添加
步骤三:开启推送功能,方法:工程targets-capabilities 找到push notification并打开
步骤四:在appdelegate.m文件添加代码
#import <react/rctpushnotificationmanager.h> ... //注册推送通知 -(void)application:(uiapplication *)application didregisterusernotificationsettings:(uiusernotificationsettings *)notificationsettings{ [rctpushnotificationmanager didregisterusernotificationsettings:notificationsettings]; } // required for the register event. - (void)application:(uiapplication *)application didregisterforremotenotificationswithdevicetoken:(nsdata *)devicetoken { [rctpushnotificationmanager didregisterforremotenotificationswithdevicetoken:devicetoken]; } // required for the notification event. you must call the completion handler after handling the remote notification. - (void)application:(uiapplication *)application didreceiveremotenotification:(nsdictionary *)userinfo fetchcompletionhandler:(void (^)(uibackgroundfetchresult))completionhandler { nslog(@"收到通知:%@",userinfo); [rctpushnotificationmanager didreceiveremotenotification:userinfo fetchcompletionhandler:completionhandler]; } // required for the registrationerror event. - (void)application:(uiapplication *)application didfailtoregisterforremotenotificationswitherror:(nserror *)error { nslog(@"error == %@" , error); [rctpushnotificationmanager didfailtoregisterforremotenotificationswitherror:error]; } // required for the localnotification event. - (void)application:(uiapplication *)application didreceivelocalnotification:(uilocalnotification *)notification { nslog(@"接受通知:%@",notification); [rctpushnotificationmanager didreceivelocalnotification:notification]; }
5. 获取devicetoken,并将devicetoken插入到_installation
找到pushservice文件,编写代码
//引用自带pushnotificationios const pushnotificationios = require('react-native').pushnotificationios; ... class pushservice { //初始化推送 init_pushservice = () => { //添加监听事件 pushnotificationios. addeventlistener('register',this.register_push); //请求权限 pushnotificationios.requestpermissions(); } //获取权限成功的回调 register_push = (devicetoken) => { //判断是否成功获取到devicetoken if (devicetoken) { this.savedevicetoken(devicetoken); } } //保存devicetoken到installation表中 savedevicetoken = (devicetoken) => { global.installation.getcurrent() .then(installation => { installation.set('devicetype', 'ios'); installation.set('apnstopic', '工程bundleid'); installation.set('devicetoken', devicetoken); return installation.save(); }); } }
修改app.js文件 在componentdidmount初始化推送
import pushservice from './pushservice/pushservice'; ... componentdidmount () { //初始化 pushservice.init_pushservice(); }
运行项目,必须真机才能获取到devicetoken,模拟器获取不到,看看是否保存的devicetoken,如果保存成功,leandclound后台能发现_installation表多了一条数据
进行到这步了就已经完成了一半了,现在只需要配置推送证书即可接收推送消息,这里就不介绍配置证书流程了,详细步骤请参考 ios推送证书设置,推送证书设置完成后,现在就去leanclound试试看能不能收到推送吧,退出app,让app处于后台状态,
点击发送,看是不是收到了消息.
进行到这步骤说明推送已经完成了一大半了,app当然还需要包括以下功能:
- app在前台、后台或者关闭状态下也能收到推送消息
- 点击通知能够对消息进行操作,比如跳转到具体页面
app处于前台状态时通知的显示
当app在前台运行时的通知ios是不会提醒的(ios10后开始支持前台显示),因此需要实现的功能就是收到通知并在前端显示,这时候就要使用一个模块来支持该功能了,那就是react-native-message-bar
首先就是安装react-native-message-bar模块了
yarn add react-native-message-bar //yarn安装 或者 npm install react-native-message-bar --save //npm安装
安装成功之后,在app.js文件中引入并注册messagebar
... /* *引入展示通知模块 */ const messagebaralert = require('react-native-message-bar').messagebar; const messagebarmanager = require('react-native-message-bar').messagebarmanager; ... componentdidmount () { //初始化 pushservice.init_pushservice(); messagebarmanager.registermessagebar(this.alert); } ... render() { const {nav} = this.state if (nav) { return ( //这里用到了导航,所以需要这样写,布局才不会乱 messagebaralert绑定一个alert <view style={{flex: 1,}}> <nav /> <messagebaralert ref={(c) => { this.alert = c }} /> </view> ) } return <view /> }
然后再对pushservice进行修改,新增对notification事件监听和推送消息的展示
import { appstate, nativemodules, alert, deviceeventemitter } from 'react-native'; ... //初始化推送 init_pushservice = () => { //添加监听事件 pushnotificationios. addeventlistener('register',this.register_push); pushnotificationios.addeventlistener('notification', this._onnotification); //请求权限 pushnotificationios.requestpermissions(); } _onnotification = ( notification ) => { var state = appstate.currentstate; // 判断当前状态是否是在前台 if (state === 'active') { this._showalert(notification._alert); } } ... _showalert = ( message ) => { const messagebarmanager = require('react-native-message-bar').messagebarmanager; messagebarmanager.showalert({ title: '您有一条新的消息', message: message, alerttype: 'success', stylesheetsuccess: { backgroundcolor: '#7851b3', titlecolor: '#fff', messagecolor: '#fff' }, viewtopinset : 20 }); } ...
最后重新运行app并在leanclound发送一条消息,看是否在app打开状态也能收到通知,到了这里推送就完成了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: JS实现百度网盘任意文件强制下载功能