iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
Modern Web

我不用Expo啦,React Native!系列 第 17

[Day17] 提醒功能-2:即時通知

今日關鍵字:notification


即時通知其實就沒有通知的意義了/images/emoticon/emoticon10.gif
不過即時通知跟計畫通知只差了一點點
而且馬上能看到成果
可以當成計畫通知的前哨戰

由於通知的功能感覺跟其他的比較不相關
於是另開個notification資料夾存放
https://ithelp.ithome.com.tw/upload/images/20200917/20121828clzTyCOmUp.png

通知內容設定

這裡新增了target屬性將被點擊的資料的內容送進來
https://ithelp.ithome.com.tw/upload/images/20200917/201218289hr5zZdMkL.png
如果變數的型別可能有多個種類時,中間可以加個|

即時通知的內容設定在localNotification
https://ithelp.ithome.com.tw/upload/images/20200917/20121828bfPNUF5XA0.png
https://ithelp.ithome.com.tw/upload/images/20200917/20121828S454SNg0bj.png
這裡把剛剛設定的動畫物件拿來設定標題等等的內容
然後在裡面偷偷塞個屬性

anime,

之後等到點擊通知時,可以當作navigation的目標
(因為我的細節頁面輸入的參數還是整個動畫物件)

元件中使用

先import service
https://ithelp.ithome.com.tw/upload/images/20200917/201218280CuB4x8eG6.png
寫好事件並綁定在實例上
https://ithelp.ithome.com.tw/upload/images/20200917/201218288O74wWtP4S.png
在點擊時發出即時通知
https://ithelp.ithome.com.tw/upload/images/20200917/2012182880Pdzt3hiy.png

這裡先來看看通知跳出的效果
https://ithelp.ithome.com.tw/upload/images/20200917/20121828pi2lor0Pga.png

onNotification就是點擊通知時觸發的事件
所以這裡需要取用通知內的內容

不過要先回想一下App的結構
https://ithelp.ithome.com.tw/upload/images/20200917/20121828Ct9iUVYBvT.png
如果直接跳進細節頁面
那上一頁是哪一個呢?/images/emoticon/emoticon17.gif

所以onNotification中的handleNotification在導航時需要注意要的是Home下的細節頁面
https://ithelp.ithome.com.tw/upload/images/20200917/201218284zsh9L6ONV.png
這樣點擊上一頁就會統一回到首頁了


明天來把即時通知的內容搬進計畫通知

參考:react-native-push-notification


上一篇
[Day16] 提醒功能-1:設定環境
下一篇
[Day18] 提醒功能-3:計畫通知
系列文
我不用Expo啦,React Native!33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言