Menjadualkan Pemberitahuan Setempat
Pasang expo-notifications, minta kebenaran, jadualkan pemberitahuan setempat untuk dicetuskan selepas kelewatan dan kendalikan ketikan pemberitahuan untuk menavigasi ke skrin tertentu.
Menjadualkan Pemberitahuan Setempat ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Apakah Pemberitahuan Setempat?
Pemberitahuan setempat ialah amaran yang dijadualkan dan dihantar sepenuhnya oleh aplikasi pada peranti, tanpa pelayan. Tidak seperti pemberitahuan tolak, pemberitahuan ini tidak memerlukan sambungan internet atau perkhidmatan bahagian belakang. Pemberitahuan setempat sesuai untuk peringatan, peringatan tabiat harian, amaran pemasa dan amaran dalam aplikasi yang dicetuskan selepas masa tertentu atau berdasarkan jadual berulang.
Memasang expo-notifications
Pasang expo-notifications menggunakan arahan pemasangan Expo supaya versi yang serasi dengan SDK dipilih. Dalam projek Expo terurus, pemautan natif berlaku secara automatik. Tambahkan juga blok konfigurasi notification kepada app.json untuk menetapkan ikon dan warna pemberitahuan Android yang digunakan oleh OS.
npx expo install expo-notifications
// app.json:
{
"expo": {
"notification": {
"icon": "./assets/notification-icon.png",
"color": "#6200ee",
"androidMode": "default"
}
}
}Meminta Kebenaran Pemberitahuan
Pada iOS dan Android, anda mesti meminta kebenaran pemberitahuan sebelum menjadualkan sebarang pemberitahuan. iOS memerlukan kelulusan pengguna yang jelas — sistem akan memaparkan dialog. Android 13 dan versi lebih baharu juga memerlukan kebenaran masa jalan. Panggil Notifications.requestPermissionsAsync() dan semak sama ada status ialah 'granted' sebelum meneruskan.
import * as Notifications from 'expo-notifications';
async function requestNotificationPermission() {
const { status } = await Notifications.requestPermissionsAsync();
if (status !== 'granted') {
Alert.alert(
'Permission Denied',
'Enable notifications in Settings to receive reminders.'
);
return false;
}
return true;
}Menetapkan Pengendali Pemberitahuan Lalai
Tetapkan pengendali pemberitahuan global dengan Notifications.setNotificationHandler untuk mengawal tingkah laku pemberitahuan apabila aplikasi berada di latar hadapan. Tanpa tetapan ini, pemberitahuan yang dihantar semasa aplikasi terbuka akan diabaikan secara senyap pada iOS. Panggilnya sekali pada tahap modul (di luar mana-mana komponen) supaya ia sentiasa aktif.
import * as Notifications from 'expo-notifications';
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true, // show banner while app is open
shouldPlaySound: true,
shouldSetBadge: false,
}),
});Menjadualkan Pemberitahuan Sekali Sahaja
Notifications.scheduleNotificationAsync menjadualkan pemberitahuan untuk dihantar pada masa tertentu. Pencetus boleh berupa bilangan saat dari sekarang, objek Date tertentu atau pencetus kalendar berulang. Fungsi ini mengembalikan pengecam pemberitahuan unik yang boleh anda gunakan kemudian untuk membatalkan pemberitahuan jika perlu.
async function scheduleReminder() {
const hasPermission = await requestNotificationPermission();
if (!hasPermission) return;
const id = await Notifications.scheduleNotificationAsync({
content: {
title: 'Daily Reminder',
body: 'Time to check your goals for today!',
sound: true,
data: { screen: 'Goals' }, // custom data for handling the tap
},
trigger: {
seconds: 60, // deliver in 60 seconds
},
});
console.log('Notification scheduled with ID:', id);
}Menjadualkan Pemberitahuan Berulang
Untuk menjadualkan pemberitahuan berulang — contohnya peringatan harian pada pukul 8 pagi — gunakan pencetus kalendar dengan bendera repeats: true. Tentukan jam, minit dan, jika perlu, hari dalam minggu untuk mencipta sebarang corak berulang. OS menghantar pemberitahuan pada masa yang ditetapkan dan menjadualkannya semula secara automatik untuk kejadian seterusnya.
await Notifications.scheduleNotificationAsync({
content: {
title: 'Good morning!',
body: 'Your daily coding practice is waiting.',
},
trigger: {
type: Notifications.SchedulableTriggerInputTypes.CALENDAR,
hour: 8,
minute: 0,
repeats: true, // fires every day at 8:00 AM
},
});Membatalkan Pemberitahuan Berjadual
Simpan pengecam pemberitahuan yang dikembalikan oleh scheduleNotificationAsync (contohnya dalam keadaan atau AsyncStorage) supaya anda boleh membatalkannya kemudian. Panggil Notifications.cancelScheduledNotificationAsync(id) dengan ID yang disimpan untuk membatalkan pemberitahuan tertentu. Gunakan cancelAllScheduledNotificationsAsync() untuk membatalkan semua pemberitahuan yang belum dihantar sekali gus.
const [notifId, setNotifId] = React.useState<string | null>(null);
async function cancelReminder() {
if (notifId) {
await Notifications.cancelScheduledNotificationAsync(notifId);
setNotifId(null);
console.log('Notification cancelled');
}
}
// Or cancel all at once:
await Notifications.cancelAllScheduledNotificationsAsync();Mengendalikan Pemberitahuan Latar Hadapan
Gunakan Notifications.addNotificationReceivedListener untuk bertindak balas apabila pemberitahuan tiba semasa aplikasi dibuka. Ini berguna untuk mengemas kini lencana dalam aplikasi, memainkan bunyi tersuai atau memuat semula suapan data. Sentiasa alih keluar pendengar dalam pembersihan useEffect bagi mengelakkan kebocoran memori.
useEffect(() => {
const subscription = Notifications.addNotificationReceivedListener(
(notification) => {
console.log('Received:', notification.request.content.title);
const screen = notification.request.content.data?.screen;
if (screen) setBadge(screen);
}
);
return () => subscription.remove();
}, []);Mengendalikan Ketikan Pemberitahuan
Gunakan Notifications.addNotificationResponseReceivedListener untuk mengendalikan tindakan apabila pengguna mengetik sepanduk pemberitahuan. Panggilan balik ini dicetuskan sama ada aplikasi berada di latar depan, latar belakang atau telah ditutup. Gunakan medan data tersuai yang dilampirkan semasa penjadualan untuk menavigasi ke skrin yang betul dalam aplikasi anda.
useEffect(() => {
const subscription = Notifications.addNotificationResponseReceivedListener(
(response) => {
const screen = response.notification.request.content.data?.screen;
if (screen && navigationRef.current) {
navigationRef.current.navigate(screen);
}
}
);
return () => subscription.remove();
}, []);Mendapatkan Semua Pemberitahuan Berjadual
Panggil Notifications.getAllScheduledNotificationsAsync() untuk mendapatkan senarai semua pemberitahuan berjadual yang masih menunggu. Ini berguna untuk penyahpepijatan, memaparkan skrin pengurusan “Peringatan” supaya pengguna boleh menyemak dan memadam pemberitahuan berjadual, atau mengelakkan penjadualan pendua jika pengguna membuka semula skrin tetapan.
async function listScheduledNotifications() {
const scheduled = await Notifications.getAllScheduledNotificationsAsync();
console.log('Pending notifications:', scheduled.length);
scheduled.forEach((notif) => {
console.log(
notif.identifier,
notif.content.title,
JSON.stringify(notif.trigger)
);
});
}Lencana dan Saluran Android
Pada iOS, tetapkan nombor lencana aplikasi dengan Notifications.setBadgeCountAsync(count). Pada Android 8 dan ke atas, pemberitahuan mesti ditetapkan kepada saluran pemberitahuan yang mengawal bunyi, getaran dan tahap kepentingan. Cipta saluran sekali semasa aplikasi dimulakan menggunakan Notifications.setNotificationChannelAsync dan rujuk ID-nya dalam medan channelId pemberitahuan anda.
if (Platform.OS === 'android') {
await Notifications.setNotificationChannelAsync('reminders', {
name: 'Reminders',
importance: Notifications.AndroidImportance.HIGH,
vibrationPattern: [0, 250, 250, 250],
sound: 'default',
});
}
// Reference in notification:
await Notifications.scheduleNotificationAsync({
content: { title: 'Reminder', channelId: 'reminders' },
trigger: { seconds: 30 },
});Semakan Pantas
Uji pemahaman anda tentang konsep Pembangunan Mudah Alih React Native daripada pelajaran ini.
Ulang Kaji Pelajaran
Dalam pelajaran ini, anda telah mempelajari bahawa requestPermissionsAsync mesti diberikan sebelum sebarang pemberitahuan boleh dipaparkan, scheduleNotificationAsync dengan pencetus menghantar pemberitahuan sekali atau berulang pada waktu yang ditetapkan, dan addNotificationResponseReceivedListener mengendalikan ketikan pengguna untuk menavigasi ke skrin yang betul. Seterusnya, kita akan meneroka cara mengendalikan kebenaran dengan baik.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Menjadualkan Pemberitahuan Setempat” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Menjadualkan Pemberitahuan Setempat”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Menjadualkan Pemberitahuan Setempat”?
Pasang expo-notifications, minta kebenaran, jadualkan pemberitahuan setempat untuk dicetuskan selepas kelewatan dan kendalikan ketikan pemberitahuan untuk menavigasi ke skrin tertentu. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Menjadualkan Pemberitahuan Setempat” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?
Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Akses Kamera dengan expo-camera
- Membaca Lokasi GPS dengan expo-location
- Menjadualkan Pemberitahuan Setempat
- Mengendalikan Kebenaran dengan Baik