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

更新時間：2018年08月06日 15:11:11 作者：ding_ios

這篇文章主要介紹了react-native使用leanclound消息推送的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

iOS消息推送的基本流程

1.注冊：為應用程序申請消息推送服務。此時你的設備會向APNs服務器發(fā)送注冊請求。2. APNs服務器接受請求，并將deviceToken返給你設備上的應用程序 3.客戶端應用程序?qū)eviceToken發(fā)送給后臺服務器程序，后臺接收并儲存。 4.后臺服務器向APNs服務器發(fā)送推送消息 5.APNs服務器將消息發(fā)給deviceToken對應設備上的應用程序

使用leanclound進行消息推送

優(yōu)勢：文檔清晰，價格便宜

接入Leanclound

1.首先需要創(chuàng)建一個react-native項目

react-native init projectName

2.在leancloud創(chuàng)建一個同名項目,并記錄好appid和appkey

3.項目創(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.在項目目錄下新建一個文件夾,名字為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靜態(tài)庫，添加方法：工程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 = () => {
  //添加監(jiān)聽事件
  PushNotificationIOS. addEventListener('register',this.register_push);
  //請求權限
  PushNotificationIOS.requestPermissions();
 }
 //獲取權限成功的回調(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();
}

運行項目，必須真機才能獲取到deviceToken,模擬器獲取不到,看看是否保存的deviceToken,如果保存成功,leandclound后臺能發(fā)現(xiàn)_Installation表多了一條數(shù)據(jù)

進行到這步了就已經(jīng)完成了一半了,現(xiàn)在只需要配置推送證書即可接收推送消息，這里就不介紹配置證書流程了,詳細步驟請參考 iOS推送證書設置,推送證書設置完成后,現(xiàn)在就去leanclound試試看能不能收到推送吧,退出APP，讓APP處于后臺狀態(tài),

點擊發(fā)送,看是不是收到了消息.

進行到這步驟說明推送已經(jīng)完成了一大半了，APP當然還需要包括以下功能:

APP在前臺、后臺或者關閉狀態(tài)下也能收到推送消息
點擊通知能夠?qū)ο⑦M行操作,比如跳轉(zhuǎn)到具體頁面

APP處于前臺狀態(tài)時通知的顯示

當APP在前臺運行時的通知iOS是不會提醒的(iOS10后開始支持前臺顯示),因此需要實現(xiàn)的功能就是收到通知并在前端顯示,這時候就要使用一個模塊來支持該功能了,那就是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事件監(jiān)聽和推送消息的展示

import { AppState, NativeModules, Alert, DeviceEventEmitter } from 'react-native';
 ...
 //初始化推送
 init_pushService = () => {
  //添加監(jiān)聽事件
  PushNotificationIOS. addEventListener('register',this.register_push);
  PushNotificationIOS.addEventListener('notification', this._onNotification);
  //請求權限
  PushNotificationIOS.requestPermissions();
 }
 _onNotification = ( notification ) => {
  var state = AppState.currentState;
  // 判斷當前狀態(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
 });

 }

 ...

最后重新運行APP并在leanclound發(fā)送一條消息,看是否在APP打開狀態(tài)也能收到通知，到了這里推送就完成了

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

React受控組件與非受控組件深入講解
具體來說這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來實現(xiàn)。下面就說說這個React中的受控組件與非受控組件的相關知識，感興趣的朋友一起看看吧
2022-12-12
React Hooks: useEffect()調(diào)用了兩次問題分析
這篇文章主要為大家介紹了React Hooks: useEffect()調(diào)用了兩次問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-11-11
在React Native中添加自定義字體的方法詳解
在這篇指南中,我們將探索使用 Google Fonts 在 React Native 應用中添加自定義字體的方法,字體是優(yōu)秀用戶體驗的基石,使用定制字體可以為你的應用程序提供獨特的身份,需要的朋友可以參考下
2024-02-02
記一個React.memo引起的bug
memo可以自己決定是否更新，但它是一個函數(shù)組件而非一個類，本文主要介紹了React.memo引起的bug，具有一定的參考價值，感興趣的可以了解一下
2022-03-03
深入React?18源碼useMemo?useCallback?memo用法及區(qū)別分析
這篇文章主要為大家介紹了React?18源碼深入分析useMemo?useCallback?memo用法及區(qū)別，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
詳解React項目的服務端渲染改造(koa2+webpack3.11)
本篇文章主要介紹了詳解React項目的服務端渲染改造(koa2+webpack3.11)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
詳解React-Router中Url參數(shù)改變頁面不刷新的解決辦法
這篇文章主要介紹了詳解React-Router中Url參數(shù)改變頁面不刷新的解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
React中路由的參數(shù)傳遞路由的配置文件詳解
路由的配置文件目前我們所有的路由定義都是直接使用Route組件，并且添加屬性來完成的，路由的參數(shù)傳遞有二種方式這，兩種方式在Router6.x中都是提供的hook函數(shù)的API,?類組件需要通過高階組件的方式使用，本文通過示例代碼詳解講解，需要的朋友參考下吧
2022-11-11
nodejs和react實現(xiàn)即時通訊簡易聊天室功能
這篇文章主要介紹了nodejs和react實現(xiàn)即時通訊簡易聊天室功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-08-08
React狀態(tài)管理Redux原理與介紹
redux是redux官方react綁定庫，能夠使react組件從redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以此來更新數(shù)據(jù)，這篇文章主要介紹了react-redux的設置,需要的朋友可以參考下
2022-08-08