React Native 之推送通知

推送通知作为app的常用功能功能，一般分为本地通知和远程通知。我们这里主要讲解一下远程推送通知，因为这个项目为国外项目，推送我采用的是firebase的推送服务，不过原理是一样的。

一.远程通知

找了很多框架，最后选择了react-native-fcm，链接如下：https://github.com/evollu/react-native-fcm集成过程文档都有，国内的可以采用极光推送jpush-react-native，链接：https://github.com/jpush/jpush-react-native

（一）react-native-fcm

1.iOS集成参考
https://medium.com/google-cloud/push-notification-for-react-native-bef05ea4d1d0

$> cd ios && pod init

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'ProjecName' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
use_frameworks!

# Pods for ProjecName
pod 'Firebase/Messaging'

target 'ProjecName-tvOSTests' do
inherit! :search_paths
# Pods for testing
end

target 'ProjecNameTests' do
inherit! :search_paths
# Pods for testing
end

end

$> pod install

还有一点就是苹果新推出的p8证书配置，多个推送证书配置步骤如图：

屏幕快照 2018-01-09 下午4.03.09.png

屏幕快照 2018-01-09 下午4.03.20.png

屏幕快照 2018-01-09 下午4.03.41.png

屏幕快照 2018-01-09 下午4.32.49.png

屏幕快照 2018-01-09 下午4.33.01.png

因为p8证书只能下载一次，所以要保存好。
2.android集成参考
https://blog.botreetechnologies.com/how-to-send-push-notification-to-the-android-phones-using-react-native-and-fcm-b28e1746da7b

有一点提示在android通知时图片做成透明的如：

3.在RN中集成

FCM.requestPermissions();

FCM.getFCMToken().then(token => {
if(token){
console.log("TOKEN (getFCMToken)=========", token);
// alert("getFCMToken"+token)
}
});
if(Platform.OS === 'ios'){
FCM.getAPNSToken().then(token => {
console.log("APNS TOKEN (getFCMToken)", token);
});
}

FCM.getInitialNotification().then(notif => {
console.log("INITIAL NOTIFICATION", notif)
});

this.notificationListener = FCM.on(FCMEvent.Notification, notif => {
console.log("Notification", notif);
// if(notif.local_notification){
// return;
// }
// if(notif.opened_from_tray){
// return;
// }
if (notif && notif.local_notification) {
console.log(".local_notification");
return;
}
// if(notif._notificationType==="will_present_notification"){
// return;
// }
if(notif &¬if.opened_from_tray){
console.log("opened_from_tray");
return;
}

if(Platform.OS ==='ios'){
//optional
//iOS requires developers to call completionHandler to end notification process. If you do not call it your background remote notifications could be throttled, to read more about it see the above documentation link.
//This library handles it for you automatically with default behavior (for remote notification, finish with NoData; for WillPresent, finish depend on "show_in_foreground"). However if you want to return different result, follow the following code to override
//notif._notificationType is available for iOS platfrom
switch(notif._notificationType){
case NotificationType.Remote:
notif.finish(RemoteNotificationResult.NewData) //other types available: RemoteNotificationResult.NewData, RemoteNotificationResult.ResultFailed
break;
case NotificationType.NotificationResponse:
notif.finish();
break;
case NotificationType.WillPresent:
notif.finish(WillPresentNotificationResult.All) //other types available: WillPresentNotificationResult.None
break;
}


}
this.showLocalNotification(notif);
this.refreshTokenListener = FCM.on(FCMEvent.RefreshToken, token => {
//console.log("TOKEN (refreshUnsubscribe)", token);
});

// direct channel related methods are ios only
// directly channel is truned off in iOS by default, this method enables it
FCM.enableDirectChannel();
this.channelConnectionListener = FCM.on(FCMEvent.DirectChannelConnectionChanged, (data) => {
// console.log('direct channel connected' + data);
});
setTimeout(function() {
FCM.isDirectChannelEstablished().then(d => console.log(d));
}, 1000);
})
}

** This method display the notification on mobile screen**
showLocalNotification(notif) {
console.log("showLocalNotification", notif);
console.log(notif.title);
console.log(notif.body);
console.log(notif.notif.click_action);
FCM.presentLocalNotification({
title: notif.title,
body: notif.body,
priority: "high",
click_action: notif.click_action,
show_in_foreground: true,
local: true,
sound:"defaut"
});
}