使用 npx expo start 來啟動應用程式，按下 PRESS TO SCHEDULE A NOTIFICATION 藍色按鈕，會在實體手機上稍候出現通知的氣球視窗。

範例程式碼在 App.js 檔案中做了什麼事？

引進 library 和設定：

範例引進了必要的 modules 及 libraries。

主要的應用程式元件：

function App() 是應用程式的主要元件。它使用 React hooks 來管理狀態 (state) 及 side effects。

React hooks 是使用 JavaScript function 定義的一種具特殊類型、可重複使用的 UI 邏輯。呼叫 hooks 的位置有其限制。

Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.

資料來源：React - Rules of Hooks

狀態管理

const 修飾符宣告以下常數
expoPushToken：儲存裝置推播通知的 token。
channels：儲存 notification channels (通知的通道)
notification：儲存最近收到的通知

useEffect hook

這個 hook 在元件設置時運行並設定下列內容：

• 註冊裝置以接受推播通知，並儲存 token
• 在 Android 裝置上檢索 channels
• 為到來的通知、使用者對通知的操作設置監聽器(listeners)
• 元件卸除時清除監聽器

UI 渲染

此元件渲染一個視圖以供顯示：

• 裝置的推播 token
• 在 Android 裝置上可供使用的通道
• 最後收到通知的內容
• 用於測試排程通知的按鈕

排程通知

schedulePushNotification 表明了如何排程一個在 2 秒後顯示的本地通知

註冊推播通知

registerForPushNotificationsAsync function 處理了：

• 為 Android 應用程式設定預設 notification channel
• 檢查及請求通知權限
• 獲取裝置的 Expo 推播 token

Key Points:

The app uses Expo's notification API, which simplifies the process of handling push notifications across iOS and Android.
It demonstrates both receiving notifications (through listeners) and sending local notifications (through scheduling).
The code includes platform-specific handling, especially for Android notification channels.
It uses the device's physical status to determine if push notifications can be used (as simulators don't support push notifications).