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


Posted in Javascript onAugust 06, 2018

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打开状态也能收到通知,到了这里推送就完成了

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

Javascript 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 #Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 #Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 #Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 #Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 #Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 #Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 #Javascript
You might like
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
JS验证不重复验证码
2017/02/10 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python面试题小结附答案实例代码
2019/04/11 Python
Django中Middleware中的函数详解
2019/07/18 Python
Python中os模块功能与用法详解
2020/02/26 Python
python实现横向拼接图片
2020/03/23 Python
python如何将图片转换素描画
2020/09/08 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
计算机网络专业推荐信
2013/11/24 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
会计工作能力自我评价
2015/03/05 职场文书
决心书格式范文
2015/09/23 职场文书
《角的度量》教学反思
2016/02/18 职场文书
Redis高并发缓存架构性能优化
2022/05/15 Redis
mysqldump进行数据备份详解
2022/07/15 MySQL