這篇文章將為大家詳細(xì)講解有關(guān)怎么在react-native中利用leanclound實(shí)現(xiàn)一個(gè)消息推送功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)公司一直秉承“誠(chéng)信做人，踏實(shí)做事”的原則，不欺瞞客戶(hù)，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶(hù)多一個(gè)朋友！專(zhuān)注中小微企業(yè)官網(wǎng)定制，網(wǎng)站建設(shè)、網(wǎng)站制作，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。
接入Leanclound
1.首先需要?jiǎng)?chuàng)建一個(gè)react-native項(xiàng)目
react-native init projectName
2.在leancloud創(chuàng)建一個(gè)同名項(xiàng)目,并記錄好appid和appkey
3.項(xiàng)目創(chuàng)建成功后,安裝推送所需的模塊（需要cd到工程目錄）
1.使用yarn安裝
yarn add leancloud-storage yarn add leancloud-installation
2.使用npm安裝
npm install leancloud-storage --save npm install leancloud-installation --save
4.在項(xiàng)目目錄下新建一個(gè)文件夾,名字為pushservice,在里面添加一個(gè)js文件PushService.js,處理消息推送的邏輯,
1.在index.js初始化leanclound
重慶分公司
重慶分公司
import AV from 'leancloud-storage'
...
/*
*添加注冊(cè)的appid和appkey
*/
const appId = 'HT23EhDdzAfFlK9iMTDl10tE-gzGzoHsz'
const appKey = 'TyiCPb5KkEmj7XDYzwpGIFtA'
/*
*初始化
*/
AV.initialize(appId,appKey);
/*
*把Installation設(shè)為全局變量,在其他文件方便使用
*/
global.Installation = require('leancloud-installation')(AV);
...2.iOS端配置
首先，在項(xiàng)目中引入RCTPushNotification,詳情請(qǐng)參考: Linking Libraries - React Native docs
步驟一：將PushNotification項(xiàng)目拖到iOS主目錄,PushNotification路徑:當(dāng)前項(xiàng)目/node_modules/react-native/Libraries/PushNotificationIOS目錄下
步驟二：添加libRCTPushNotification靜態(tài)庫(kù)，添加方法：工程Targets-Build Phases-link binary with Libraries 點(diǎn)擊添加，搜索libRCTPushNotification.a并添加
步驟三:開(kāi)啟推送功能，方法：工程Targets-Capabilities 找到Push Notification并打開(kāi)
步驟四:在Appdelegate.m文件添加代碼
#import... //注冊(cè)推送通知 -(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文件，編寫(xiě)代碼
//引用自帶PushNotificationIOS
const PushNotificationIOS = require('react-native').PushNotificationIOS;
...
class PushService {
//初始化推送
init_pushService = () => {
//添加監(jiān)聽(tīng)事件
PushNotificationIOS. addEventListener('register',this.register_push);
//請(qǐng)求權(quán)限
PushNotificationIOS.requestPermissions();
}
//獲取權(quán)限成功的回調(diào)
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();
}運(yùn)行項(xiàng)目，必須真機(jī)才能獲取到deviceToken,模擬器獲取不到,看看是否保存的deviceToken,如果保存成功,leandclound后臺(tái)能發(fā)現(xiàn)_Installation表多了一條數(shù)據(jù)
進(jìn)行到這步了就已經(jīng)完成了一半了,現(xiàn)在只需要配置推送證書(shū)即可接收推送消息，這里就不介紹配置證書(shū)流程了,詳細(xì)步驟請(qǐng)參考 iOS推送證書(shū)設(shè)置,推送證書(shū)設(shè)置完成后,現(xiàn)在就去leanclound試試看能不能收到推送吧,退出APP，讓APP處于后臺(tái)狀態(tài),
點(diǎn)擊發(fā)送,看是不是收到了消息.
進(jìn)行到這步驟說(shuō)明推送已經(jīng)完成了一大半了，APP當(dāng)然還需要包括以下功能:
APP在前臺(tái)、后臺(tái)或者關(guān)閉狀態(tài)下也能收到推送消息
點(diǎn)擊通知能夠?qū)ο⑦M(jìn)行操作,比如跳轉(zhuǎn)到具體頁(yè)面
APP處于前臺(tái)狀態(tài)時(shí)通知的顯示
當(dāng)APP在前臺(tái)運(yùn)行時(shí)的通知iOS是不會(huì)提醒的(iOS10后開(kāi)始支持前臺(tái)顯示),因此需要實(shí)現(xiàn)的功能就是收到通知并在前端顯示,這時(shí)候就要使用一個(gè)模塊來(lái)支持該功能了,那就是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文件中引入并注冊(cè)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 (
//這里用到了導(dǎo)航,所以需要這樣寫(xiě),布局才不會(huì)亂 MessageBarAlert綁定一個(gè)alert
{ this.alert = c }} />
)
}
return 然后再對(duì)PushService進(jìn)行修改,新增對(duì)notification事件監(jiān)聽(tīng)和推送消息的展示
import { AppState, NativeModules, Alert, DeviceEventEmitter } from 'react-native';
...
//初始化推送
init_pushService = () => {
//添加監(jiān)聽(tīng)事件
PushNotificationIOS. addEventListener('register',this.register_push);
PushNotificationIOS.addEventListener('notification', this._onNotification);
//請(qǐng)求權(quán)限
PushNotificationIOS.requestPermissions();
}
_onNotification = ( notification ) => {
var state = AppState.currentState;
// 判斷當(dāng)前狀態(tài)是否是在前臺(tái)
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
});
}
...關(guān)于怎么在react-native中利用leanclound實(shí)現(xiàn)一個(gè)消息推送功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
