Planlægning af lokale notifikationer
Installér expo-notifications, anmod om tilladelse, planlæg en lokal notifikation til at blive udløst efter en forsinkelse, og håndtér tryk på notifikationen for at navigere til et bestemt skærmbillede.
Planlægning af lokale notifikationer er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvad er lokale notifikationer?
Lokale notifikationer er beskeder, som din app planlægger og leverer helt på enheden uden en server. I modsætning til push-notifikationer kræver de hverken internetforbindelse eller en backend-tjeneste. De er ideelle til påmindelser, daglige vanepåmindelser, timerbeskeder og beskeder i appen, der udløses efter et bestemt tidspunkt eller ud fra en gentagen tidsplan.
Installere expo-notifications
Installér expo-notifications ved hjælp af Expos installationskommando, så den SDK-kompatible version vælges. I administrerede Expo-projekter sker native linking automatisk. Tilføj også konfigurationsblokken notification i app.json for at angive det notifikationsikon og den farve, som operativsystemet bruger på Android.
npx expo install expo-notifications
// app.json:
{
"expo": {
"notification": {
"icon": "./assets/notification-icon.png",
"color": "#6200ee",
"androidMode": "default"
}
}
}Anmode om notifikationstilladelse
På både iOS og Android skal du anmode om tilladelse til notifikationer, før du kan planlægge en notifikation. iOS kræver udtrykkelig godkendelse fra brugeren — systemet viser en dialog. Android 13 og nyere kræver også tilladelse under kørsel. Kald Notifications.requestPermissionsAsync(), og kontrollér, om status er 'granted', før du fortsætter.
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;
}Angive en standardbehandler til notifikationer
Angiv en global notifikationsbehandler med Notifications.setNotificationHandler for at styre, hvordan notifikationer opfører sig, når appen er i forgrunden. Uden denne behandler ignoreres notifikationer, der leveres, mens appen er åben, stiltiende på iOS. Kald den én gang på modulniveau (uden for enhver komponent), så den altid er aktiv.
import * as Notifications from 'expo-notifications';
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true, // show banner while app is open
shouldPlaySound: true,
shouldSetBadge: false,
}),
});Planlægge en notifikation én gang
Notifications.scheduleNotificationAsync planlægger en notifikation til levering på et bestemt tidspunkt. Udløseren kan være et antal sekunder fra nu, et bestemt Date-objekt eller en gentagen kalenderudløser. Funktionen returnerer en unik notifikationsidentifikator, som du senere kan bruge til at annullere notifikationen, hvis det bliver nødvendigt.
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);
}Planlægge en gentagen notifikation
Hvis du vil planlægge en gentagen notifikation — f.eks. en daglig påmindelse kl. 8 — skal du bruge en kalenderudløser med flaget repeats: true. Angiv time, minut og eventuelt ugedag for at oprette et gentaget mønster. Operativsystemet leverer notifikationen på det angivne tidspunkt og planlægger den automatisk igen til næste 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
},
});Annullere en planlagt notifikation
Gem den notifikationsidentifikator, som scheduleNotificationAsync returnerer (f.eks. i state eller AsyncStorage), så du kan annullere notifikationen senere. Kald Notifications.cancelScheduledNotificationAsync(id) med det gemte ID for at annullere en bestemt notifikation. Brug cancelAllScheduledNotificationsAsync() til at annullere alle ventende notifikationer på én gang.
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 notifikationer i forgrunden
Brug Notifications.addNotificationReceivedListener til at reagere, når en notifikation ankommer, mens appen er åben. Det er nyttigt til at opdatere badges i appen, afspille en tilpasset lyd eller opdatere et datafeed. Fjern altid lytteren i oprydningen i useEffect for at forhindre hukommelseslækager.
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åndtering af tryk på notifikationer
Brug Notifications.addNotificationResponseReceivedListener til at håndtere, når brugeren trykker på et notifikationsbanner. Dette callback kaldes, uanset om appen var i forgrunden, i baggrunden eller lukket. Brug det tilpassede data-felt, som du tilføjede ved planlægningen, til at navigere til den korrekte skærm 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();
}, []);Hentning af alle planlagte notifikationer
Kald Notifications.getAllScheduledNotificationsAsync() for at hente en liste over alle ventende planlagte notifikationer. Det er nyttigt til fejlfinding, til at vise en administrationsskærm for »Påmindelser«, hvor brugerne kan gennemgå og slette planlagte notifikationer, eller til at forhindre dobbelt planlægning, hvis brugeren åbner indstillingsskærmen igen.
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)
);
});
}Badges og Android-kanaler
På iOS angiver du appens badgetal med Notifications.setBadgeCountAsync(count). På Android 8+ skal notifikationer tildeles en notifikationskanal, som styrer lyd, vibration og vigtighed. Opret en kanal én gang, når appen starter, ved hjælp af Notifications.setNotificationChannelAsync, og referér til dens ID i notifikationens 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 },
});Hurtigt tjek
Test din forståelse af begreberne inden for React Native Mobile Development fra denne lektion.
Opsummering af lektionen
I denne lektion har du lært, at requestPermissionsAsync skal være godkendt, før en notifikation kan vises, at scheduleNotificationAsync med en udløser leverer engangs- eller gentagne notifikationer på angivne tidspunkter, og at addNotificationResponseReceivedListener håndterer brugerens tryk, så appen navigerer til den rigtige skærm. Dernæst ser vi på, hvordan du håndterer tilladelser på en god måde.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Planlægning af lokale notifikationer” gratis?
Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Planlægning af lokale notifikationer”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Planlægning af lokale notifikationer”?
Installér expo-notifications, anmod om tilladelse, planlæg en lokal notifikation til at blive udløst efter en forsinkelse, og håndtér tryk på notifikationen for at navigere til et bestemt skærmbilled… Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Native Academy?
Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Planlægning af lokale notifikationer”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Native Academy-lektion?
Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Kameraadgang med expo-camera
- Aflæsning af GPS-position med expo-location
- Planlægning af lokale notifikationer
- Elegant håndtering af tilladelser