欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react-native使用leanclound消息推送的方法

程序员文章站 2022-05-15 12:23:01
ios消息推送的基本流程 1.注册:为应用程序申请消息推送服务。此时你的设备会向apns服务器发送注册请求。2. apns服务器接受请求,并将devicetoken返给你...

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

react-native使用leanclound消息推送的方法

react-native使用leanclound消息推送的方法

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表多了一条数据

react-native使用leanclound消息推送的方法

进行到这步了就已经完成了一半了,现在只需要配置推送证书即可接收推送消息,这里就不介绍配置证书流程了,详细步骤请参考 ios推送证书设置,推送证书设置完成后,现在就去leanclound试试看能不能收到推送吧,退出app,让app处于后台状态,

react-native使用leanclound消息推送的方法

点击发送,看是不是收到了消息.

进行到这步骤说明推送已经完成了一大半了,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打开状态也能收到通知,到了这里推送就完成了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。