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-storageyarn add leancloud-installation
2.使用npm安装
npm install leancloud-storage --savenpm 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 *)userInfofetchCompletionHandler:(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文件，编写代码
//引用自带PushNotificationIOSconst 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在前台运行时的通知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打开状态也能收到通知，到了这里推送就完成了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。
新闻热点
疑难解答
