推送通知作為app的常用功能功能白华，一般分為本地通知和遠程通知。我們這里主要講解一下遠程推送通知舔株，因為這個項目為國外項目，推送我采用的是firebase的推送服務(wù)暮屡，不過原理是一樣的。

一.遠程通知

找了很多框架毅桃，最后選擇了react-native-fcm褒纲，鏈接如下：https://github.com/evollu/react-native-fcm集成過程文檔都有，國內(nèi)的可以采用極光推送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通知時圖片做成透明的如：

<meta-data
android:name="com.google.firebase.messaging.default_notification_icon"
android:resource="@mipmap/ic_notif" />

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 &&notif.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"
});
}