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打開狀態也能收到通知，到了這里推送就完成了
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
