? ? ? ? 之前集成了個(gè)推到項(xiàng)目中，現(xiàn)在需要完成接收到消息后展示通知（Notification），消息發(fā)送通過(guò)個(gè)推（消息發(fā)送使用的是個(gè)推的透?jìng)鳎驼麄€(gè)個(gè)推渠道有區(qū)別，不會(huì)自動(dòng)生成notification），只需要在接收到消息后，生成展示notification。這里使用插件react-native-push-notification
? ? ? ? 1、在 終端進(jìn)入到殼子根目錄下分別執(zhí)行
npm install react-native-push-notification
react-native link?react-native-push-notification
執(zhí)行react-native run-android，終端報(bào)錯(cuò)
修改引入的react-native-push-notification版本到3.1.3，再進(jìn)入到react-native-push-notification依賴包的build.gradle文件，修改依賴的第三方包版本如下
可正常運(yùn)行Android 端（react-native run-android）
2、終端進(jìn)入到自己的項(xiàng)目根目錄下分別執(zhí)行
npm install react-native-push-notification@3.1.3
react-native link?react-native-push-notification
在官網(wǎng)中，有這么一段話
翻譯一下
然后按照對(duì)應(yīng)版本的官方文檔react-native-push-notification - npm，進(jìn)行Android端設(shè)置，在殼子android下的AndroidManifest.xml文件中，添加如下代碼（只做notification展示，所以只需要PushNotification.localNotification()即可）：
<service
????????????android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
????????????android:exported="false"?>
????????????<intent-filter>
????????????????<action?android:name="com.google.firebase.MESSAGING_EVENT"?/>
????????????</intent-filter>
?</service>
<meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_name" android:value="YOUR NOTIFICATION CHANNEL NAME" />
<meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_description" android:value="YOUR NOTIFICATION CHANNEL DESCRIPTION" />
<!-- Change the resource name to your App's accent color - or any other color you want -->
<meta-data android:name="com.dieam.reactnativepushnotification.notification_color" android:resource="@android:color/white" />
在需要引用notification的地方添加代碼：
PushNotification.localNotification({
? ? ? /* Android Only Properties */
? ? ? id: '0', // (optional) Valid unique 32 bit integer specified as string. default: Autogenerated Unique ID
? ? ? ticker: "My Notification Ticker", // (optional)
? ? ? autoCancel: true, // (optional) default: true
? ? ? largeIcon: "ic_launcher", // (optional) default: "ic_launcher"
? ? ? smallIcon: "ic_notification", // (optional) default: "ic_notification" with fallback for "ic_launcher"
? ? ? bigText: "My big text that will be shown when notification is expanded", // (optional) default: "message" prop
? ? ? subText: "This is a subText", // (optional) default: none
? ? ? color: "red", // (optional) default: system default
? ? ? vibrate: true, // (optional) default: true
? ? ? vibration: 300, // vibration length in milliseconds, ignored if vibrate=false, default: 1000
? ? ? tag: 'some_tag', // (optional) add tag to message
? ? ? group: "group", // (optional) add group to message
? ? ? ongoing: false, // (optional) set whether this is an "ongoing" notification
? ? ? priority: "high", // (optional) set notification priority, default: high
? ? ? visibility: "private", // (optional) set notification visibility, default: private
? ? ? importance: "high", // (optional) set notification importance, default: high
? ? ? /* iOS only properties */
? ? ? alertAction: 'view',// (optional) default: view
? ? ? category: null,// (optional) default: null
? ? ? userInfo: null,// (optional) default: null (object containing additional notification data)
? ? ? /* iOS and Android properties */
? ? ? title: "My Notification Title", // (optional)
? ? ? message: "My Notification Message", // (required)
? ? ? playSound: false, // (optional) default: true
? ? ? soundName: 'default', // (optional) Sound to play when the notification is shown. Value of 'default' plays the default sound. It can be set to a custom sound such as 'android.resource://com.xyz/raw/my_sound'. It will look for the 'my_sound' audio file in 'res/raw' directory and play it. default: 'default' (default sound is played)
? ? ? number: '10', // (optional) Valid 32 bit integer specified as string. default: none (Cannot be zero)
? ? ? repeatType: 'day', // (optional) Repeating interval. Check 'Repeating Notifications' section for more info.
? ? ? actions: '["Yes", "No"]',? // (Android only) See the doc for notification actions to know more
? ? });
運(yùn)行Android 端之后，可以看到發(fā)送的notification成功
通過(guò)調(diào)整PushNotification.localNotification參數(shù)來(lái)達(dá)到需要的樣式和信息。
3、點(diǎn)擊notification
notification的點(diǎn)擊觸發(fā)通過(guò)PushNotification.configure()來(lái)實(shí)現(xiàn)。其中的方法
onNotification: function (notification) {
? ? ? ? console.log('NOTIFICATION:', notification);
? ? ? ? // process the notification
? ? ? ? // required on iOS only (see fetchCompletionHandler docs: https://facebook.github.io/react-native/docs/pushnotificationios.html)
? ? ? ? // notification.finish(PushNotificationIOS.FetchResult.NoData);
? ? ? },
其中的notification參數(shù)會(huì)把第二步中的PushNotification.localNotification()全部參數(shù)返回，通過(guò)解析來(lái)達(dá)到跳轉(zhuǎn)或者網(wǎng)絡(luò)請(qǐng)求。
到這一步為止，Android端的notification就完成了。
4、再來(lái)看一看iOS。先不修改代碼，直接運(yùn)行看看會(huì)有什么效果。emmm～～雖說(shuō)不會(huì)報(bào)錯(cuò)，但也沒有任何效果
做了各種配置，也進(jìn)行了各種測(cè)試，浪費(fèi)了很久的時(shí)間才發(fā)現(xiàn)，ios模擬器不支持消息推送，一口老血噴出來(lái)。既然這樣的話，ios的推送就放到等到公司提供了測(cè)試機(jī)之后的篇章里講吧。
