選用套件

筆者一開始查到了 React Native Push Notifications 這個套件，但官方建議我們改用其他的替代方案：

should probably consider these alternatives: Notifee free since september or react-native-notifications

1. Notifee
2. react-native-notifications

目前嘗試了 Notifee 以後，覺得可行，所以暫時不考慮第二款。

排除 build 的問題

用 yarn 安裝後，筆者在 App.js 中引入套件：

import notifee from '@notifee/react-native';

按照官方需要重新 build 的說法：

To automatically link the package, rebuild your project

筆者重新跑了 npx react-native run-android。

但 compile 的時候，出現錯誤：

... cannot find symbol new String[] {Manifest.permission.POST_NOTIFICATIONS}, react native ...

嘗試找到了這篇解法：「Android manifest POST_NOTIFICATIONS missing import」，初步認為在 Android Studio 中安裝提及的 SDK Platforms 以及 SDK Tools 可排除。

可是在等待下載的時候，筆者加了關鍵字 React Native 後，找到了這一篇「cannot find symbol NotifeeApiModule.java:245 REQUEST_CODE_NOTIFICATION_PERMISSION」，是 Notifee 官方的 issue。根據內容，我們需要在 AnnoyancePrediction/android/build.gradle 中更改參數。

原先：

        buildToolsVersion = "31.0.0"
        minSdkVersion = 21
        compileSdkVersion = 31
        targetSdkVersion = 31

改成：

        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33

跟前述提到要安裝 33 版的 SDK Platforms 以及 SDK Tools 是有關聯的。

重新 build 以後，就可以正常運行了。但因為 SDK Platforms 以及 SDK Tools 此時皆已安裝完畢，不確定有無影響，若讀者改完 build.gradle 後仍無法成功，可以嘗試安裝。

實作

筆者讀文件時，有看到 Notifee 似乎不需要透過昨天嘗試的 react-native-background-timer 來達到 cronjob 效果的做法：Triggers。可是初步實作並未成功，所以先改嘗試陽春版通知的做法。

依照陽春版通知的文件，首先讓我們來建立一個名為 onDisplayNotification 的 function：

async function onDisplayNotification() {
  // Request permissions (required for iOS)
  await notifee.requestPermission();

  // Create a channel (required for Android)
  const channelId = await notifee.createChannel({
    id: 'default',
    name: 'Default Channel',
  });

  // Display a notification
  await notifee.displayNotification({
    title: '通知測試',
    body: '測試',
    android: {
      channelId,
      pressAction: {
        id: 'default',
      },
    },
  });
}

此處要注意，官方的文件中在 android 的物件裡面是有帶 smallIcon 這個 property，這邊如果我們如果無腦按照文件帶了 smallIcon：'name-of-a-small-icon'，執行這個 function 就會跳錯：

Error: Invalid notification (no valid small icon): Notification(channel=default shortcut=null contentView=null vibrate=null sound=null defaults=0x0 flags=0x10 color=0x00000000 vis=PRIVATE)

只要 delete 這個 property 就沒問題了。

接著讓我們在 Day 25 原先建立的第三個按鈕底下，再加入另一個按鈕，來測試 onDisplayNotification 的執行情形：

<Section>
        <Button
          title="Create Notification"
          onPress={() => onDisplayNotification()}
        />
</Section>

完成後 UI 的樣子：

點下去：

在通知中心成功出現了我們建立的通知訊息！

明天讓我們試試看，如果 Triggers 行不通，那麼我們會使用陽春版通知加上 background-timer 來實現通知的 cronjob 。

今天收工！

延伸閱讀

• RN android permissions