微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

iOS消息推送的基本流程

1.注册:为应用程序申请消息推送服务。此时你的设备会向APNs服务器发送注册请求。2. APNs服务器接受请求,并将devicetoken返给你设备上的应用程序 3.客户端应用程序将devicetoken发送给后台服务器程序,后台接收并储存。 4.后台服务器向APNs服务器发送推送消息 5.APNs服务器将消息发给devicetoken对应设备上的应用程序

使用leanclound进行消息推送

优势:文档清晰,价格便宜

接入Leanclound

1.首先需要创建一个react-native项目

rush:js;"> react-native init projectName

2.在leancloud创建一个同名项目,并记录好appid和appkey

3.项目创建成功后,安装推送所需的模块(需要cd到工程目录)

1.使用yarn安装

rush:bash;"> yarn add leancloud-storage yarn add leancloud-installation

2.使用npm安装

rush:bash;"> npm install leancloud-storage --save npm install leancloud-installation --save

4.在项目目录下新建一个文件夹,名字为pushservice,在里面添加一个js文件PushService.js,处理消息推送的逻辑,

rush:js;"> 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,详情请参考:

步骤一:将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文件添加代码

...

//注册推送通知
-(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. 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初始化推送

运行项目,必须真机才能获取到deviceToken,模拟器获取不到,看看是否保存的deviceToken,如果保存成功,leandclound后台能发现_Installation表多了一条数据

,推送证书设置完成后,现在就去leanclound试试看能不能收到推送吧,退出APP,让APP处于后台状态,

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

进行到这步骤说明推送已经完成了一大半了,APP当然还需要包括以下功能:

APP处于前台状态时通知显示

当APP在前台运行时的通知iOS是不会提醒的(iOS10后开始支持前台显示),因此需要实现的功能就是收到通知并在前端显示,这时候就要使用一个模块来支持功能了,那就是react-native-message-bar

首先就是安装react-native-message-bar模块了

rush:bash;"> yarn add react-native-message-bar //yarn安装 或者 npm install react-native-message-bar --save //npm安装

安装成功之后,在App.js文件中引入并注册MessageBar

rush:js;"> ... /* *引入展示通知模块 */ 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

然后再对PushService进行修改,新增对notification事件监听和推送消息的展示

{ //添加监听事件 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打开状态也能收到通知,到了这里推送就完成了

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐