这篇文章将为大家详细讲解有关怎么在react-native中利用leanclound实现一个消息推送功能，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联建站网站建设公司一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！ 以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！专注中小微企业官网定制，网站建设、网站制作，塑造企业网络形象打造互联网企业效应。
接入Leanclound
1.首先需要创建一个react-native项目
react-native init projectName
2.在leancloud创建一个同名项目,并记录好appid和appkey
3.项目创建成功后,安装推送所需的模块（需要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静态库，添加方法：工程Targets-Build Phases-link binary with Libraries 点击添加，搜索libRCTPushNotification.a并添加
步骤三:开启推送功能，方法：工程Targets-Capabilities 找到Push Notification并打开
步骤四:在Appdelegate.m文件添加代码
#import... //注册推送通知 -(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推送证书设置,推送证书设置完成后,现在就去leanclound试试看能不能收到推送吧,退出APP，让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
{ this.alert = c }} />
)
}
return 然后再对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
});
}
...关于怎么在react-native中利用leanclound实现一个消息推送功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
