react-native leancound 메시지 푸 시 방법 사용

iOS 메시지 푸 시 기본 절차
1.등록:응용 프로그램 에 메시지 푸 시 서 비 스 를 신청 합 니 다.이 때 장치 가 APNs 서버 에 등록 요청 을 보 냅 니 다.2.APNs 서버 가 요청 을 받 아들 이 고 deviceToken 을 장치 에 있 는 응용 프로그램 에 되 돌려 줍 니 다.3.클 라 이언 트 응용 프로그램 은 deviceToken 을 백 엔 드 서버 프로그램 에 보 내 고 백 엔 드 는 받 고 저장 합 니 다.4.백 엔 드 서버 는 APNs 서버 에 푸 시 메 시 지 를 보 냅 니 다.5.APNs 서버 는 deviceToken 에 대응 하 는 장치 의 응용 프로그램 에 메 시 지 를 보 냅 니 다.
leancound 를 사용 하여 메시지 전송
장점:문서 가 뚜렷 하고 가격 이 저렴 합 니 다.
Leanclound 접속
1.우선 react-native 프로젝트 를 만들어 야 합 니 다.

react-native init projectName

2.leancloud 에서 같은 이름 의 프로젝트 를 만 들 고 appid 와 appkey 를 기록 합 니 다.


3.프로젝트 생 성 성공 후 푸 시 에 필요 한 모듈 설치(프로젝트 디 렉 터 리 에 cd 필요)
1.원사 설치 사용

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 에서 leancound 초기 화

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 엔 드 설정
우선,프로젝트 에 RCTPush Notification 을 도입 합 니 다.자세 한 내용 은 참고 하 시기 바 랍 니 다Linking Libraries - React Native docs
STEP 1:PushNotification 항목 을 iOS 홈 디 렉 터 리 로 끌 어 옵 니 다.PushNotification 경로:현재 항목/nodemodules/react-native/Libraries/PushNotificationIOS 디 렉 터 리 아래
STEP 2:libRCTPushNotification 정적 라 이브 러 리 추가,추가 방법:프로젝트 Targets-Build Phases-link binary with Libraries 클릭 으로 추가,libRCTPushNotification.a 검색 및 추가
STEP 3:푸 시 기능 오픈,방법:프로젝트 Targets-Capabilities Push 알림 을 찾 아 열기
단계 4: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 = () => {
  //      
  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 푸 시 인증서 설정푸 시 인증서 설정 이 완 료 된 후에 지금 은 leancound 에 가서 푸 시 메 시 지 를 받 을 수 있 는 지 확인 하 세 요.앱 을 종료 하고 앱 을 백 스테이지 상태 로 만 듭 니 다.

메 시 지 를 받 았 는 지 보 내 려 면 누 르 십시오.
이 절 차 를 진행 한 것 은 푸 시 와 전송 이 이미 절반 이상 완성 되 었 다 는 것 을 의미한다.APP 는 다음 과 같은 기능 을 포함해 야 한다.

앱 은 프론트,백 스테이지 또는 닫 힌 상태 에서 도 푸 시 메 시 지 를 받 을 수 있 습 니 다

알림 을 클릭 하면 정 보 를 조작 할 수 있 습 니 다.예 를 들 어 구체 적 인 페이지 로 이동 합 니 다

앱 이 프론트 상태 일 때 알림 표시
앱 이 프론트 데스크 에서 실 행 될 때 알림 iOS 는 알 리 지 않 습 니 다(iOS 10 이후 프론트 데스크 톱 디 스 플레이 지원).따라서 실행 해 야 할 기능 은 알림 을 받 고 프론트 에 표시 하 는 것 입 니 다.이 럴 때 모듈 을 사용 하여 이 기능 을 지원 해 야 합 니 다.바로 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 파일 에 Message Bar 를 도입 하고 등록 합 니 다.

...
/*
*        
 */
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
 });

 }

 ...

마지막 으로 앱 을 다시 실행 하고 leancound 에서 메 시 지 를 보 내 서 앱 이 열 린 상태 에서 도 알림 을 받 을 수 있 는 지 확인 하고 여기 서 푸 시 를 하면 완 료 됩 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.