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

react-native init projectName

yarn add leancloud-storage
yarn add leancloud-installation

npm install leancloud-storage --save
npm install leancloud-installation --save

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);

...

#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];
}

//引用自带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();
  });
 }
 
}

import PushService from './pushservice/PushService';
...
componentDidMount () {
 //初始化
 PushService.init_pushService();
}

yarn add react-native-message-bar //yarn安装
或者
npm install react-native-message-bar --save //npm安装

...
/*
*引入展示通知模块
 */
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 />
 }

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
 });

 }

 ...