Planlegge lokale varsler
Installer expo-notifications, be om tillatelse, planlegg et lokalt varsel som utløses etter en forsinkelse, og håndter trykk på varselet for å navigere til en bestemt skjerm.
Planlegge lokale varsler er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva er lokale varsler?
Lokale varsler er varsler som appen planlegger og leverer helt på enheten, uten en server. I motsetning til push-varsler krever de verken internettilkobling eller en backend-tjeneste. De egner seg godt til påminnelser, daglige vanepåminnelser, tidt alerts og varsler i appen som utløses etter et bestemt tidspunkt eller etter en gjentakende tidsplan.
Installere expo-notifications
Installer expo-notifications ved hjelp av Expo-installasjonskommandoen, slik at den SDK-kompatible versjonen velges. I administrerte Expo-prosjekter skjer koblingen til innebygd kode automatisk. Legg også til konfigurasjonsblokken notification i app.json for å angi varslingsikonet og fargen på Android som operativsystemet skal bruke.
npx expo install expo-notifications
// app.json:
{
"expo": {
"notification": {
"icon": "./assets/notification-icon.png",
"color": "#6200ee",
"androidMode": "default"
}
}
}Be om varslingstillatelse
Både på iOS og Android må De be om varslingstillatelse før De planlegger et varsel. iOS krever uttrykkelig godkjenning fra brukeren – systemet viser en dialogboks. Android 13 og nyere krever også tillatelse under kjøring. Kall Notifications.requestPermissionsAsync(), og kontroller at status er 'granted' før De fortsetter.
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;
}Angi en standardbehandler for varsler
Angi en global varslingsbehandler med Notifications.setNotificationHandler for å styre hvordan varsler oppfører seg når appen er i forgrunnen. Uten dette ignoreres varsler som leveres mens appen er åpen, iOS. Kall den én gang på modulnivå (utenfor alle komponenter), slik at den alltid er aktiv.
import * as Notifications from 'expo-notifications';
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true, // show banner while app is open
shouldPlaySound: true,
shouldSetBadge: false,
}),
});Planlegge et engangsvarsel
Notifications.scheduleNotificationAsync planlegger at et varsel skal leveres på et bestemt tidspunkt. Utløseren kan være et antall sekunder fra nå, et bestemt Date-objekt eller en gjentakende kalenderutløser. Funksjonen returnerer en unik varslings-ID som De senere kan bruke til å avbryte varslet ved behov.
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);
}Planlegge et gjentakende varsel
For å planlegge et gjentakende varsel – for eksempel en daglig påminnelse klokken 08 – bruker De en kalenderutløser med flagget repeats: true. Angi time, minutt og eventuelt ukedag for å opprette et valgfritt gjentakelsesmønster. Operativsystemet leverer varslet på det angitte tidspunktet og planlegger det automatisk på nytt til neste forekomst.
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
},
});Avbryte et planlagt varsel
Lagre varslings-ID-en som returneres av scheduleNotificationAsync (for eksempel i state eller AsyncStorage), slik at De kan avbryte varslet senere. Kall Notifications.cancelScheduledNotificationAsync(id) med den lagrede ID-en for å avbryte et bestemt varsel. Bruk cancelAllScheduledNotificationsAsync() for å avbryte alle ventende varsler samtidig.
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();Håndtere varsler i forgrunnen
Bruk Notifications.addNotificationReceivedListener for å reagere når et varsel kommer mens appen er åpen. Dette er nyttig for å oppdatere merker i appen, spille av en egendefinert lyd eller oppdatere en datastrøm. Fjern alltid lytteren i oppryddingen i useEffect for å unngå minnelekkasjer.
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();
}, []);Håndtere trykk på varsler
Bruk Notifications.addNotificationResponseReceivedListener for å håndtere at brukeren trykker på et varselbanner. Dette tilbakekallet utløses enten appen var i forgrunnen, i bakgrunnen eller lukket. Bruk det egendefinerte data-feltet du la til ved planleggingen, for å navigere til riktig skjerm i appen.
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();
}, []);Hente alle planlagte varsler
Kall Notifications.getAllScheduledNotificationsAsync() for å hente en liste over alle ventende, planlagte varsler. Dette er nyttig ved feilsøking, for å vise en administrasjonsskjerm for «Påminnelser» der brukere kan se gjennom og slette planlagte varsler, eller for å forhindre dobbeltplanlegging hvis brukeren åpner innstillingsskjermen på nytt.
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)
);
});
}Merker og Android-kanaler
På iOS angir De appens merkingsnummer med Notifications.setBadgeCountAsync(count). På Android 8 eller nyere må varsler tilordnes en varslingskanal som styrer lyd, vibrasjon og viktighet. Opprett en kanal én gang når appen starter, ved hjelp av Notifications.setNotificationChannelAsync, og referer til ID-en i varselets channelId-felt.
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 },
});Kort sjekk
Test forståelsen Deres av React Native Mobile Development-konseptene fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen har De lært at requestPermissionsAsync må være innvilget før et varsel kan vises, at scheduleNotificationAsync med en utløser leverer engangsvarsler eller gjentakende varsler på angitte tidspunkter, og at addNotificationResponseReceivedListener håndterer brukerens trykk for å navigere til riktig skjerm. Neste tema er hvordan tillatelser håndteres på en god måte.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Planlegge lokale varsler» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Planlegge lokale varsler», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Planlegge lokale varsler»?
Installer expo-notifications, be om tillatelse, planlegg et lokalt varsel som utløses etter en forsinkelse, og håndter trykk på varselet for å navigere til en bestemt skjerm. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Native Academy?
Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Planlegge lokale varsler»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?
Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Kameratilgang med expo-camera
- Lese GPS-posisjon med expo-location
- Planlegge lokale varsler
- Håndtere tillatelser på en god måte