Paikallisten ilmoitusten ajastaminen
Asentakaa expo-notifications, pyytäkää käyttöoikeus, ajastakaa viiveen jälkeen näytettävä paikallinen ilmoitus ja käsitelkää ilmoituksen napautus navigoimalla tiettyyn näkymään.
Paikallisten ilmoitusten ajastaminen on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mitä paikalliset ilmoitukset ovat?
Paikalliset ilmoitukset ovat hälytyksiä, jotka sovellus ajastaa ja toimittaa kokonaan laitteella ilman palvelinta. Toisin kuin push-ilmoitukset, ne eivät edellytä internet-yhteyttä tai taustapalvelua. Ne sopivat erinomaisesti muistutuksiin, päivittäisiin tapakehotteisiin, ajastinhälytyksiin ja sovelluksen sisäisiin ilmoituksiin, jotka käynnistyvät tietyn ajan kuluttua tai toistuvan aikataulun mukaisesti.
expo-notificationsin asentaminen
Asenna expo-notifications Expo-asennuskomennolla, jotta käyttöön valitaan SDK:n kanssa yhteensopiva versio. Hallinnoiduissa Expo-projekteissa natiivien riippuvuuksien linkitys tapahtuu automaattisesti. Lisää myös notification-määrityslohko tiedostoon app.json, jotta voit määrittää käyttöjärjestelmän käyttämän Android-ilmoituksen kuvakkeen ja värin.
npx expo install expo-notifications
// app.json:
{
"expo": {
"notification": {
"icon": "./assets/notification-icon.png",
"color": "#6200ee",
"androidMode": "default"
}
}
}Ilmoitusluvan pyytäminen
Sekä iOS:llä että Androidilla on pyydettävä ilmoituslupa ennen ilmoitusten ajastamista. iOS edellyttää käyttäjän nimenomaista hyväksyntää, ja järjestelmä näyttää valintaikkunan. Myös Android 13 ja uudemmat versiot edellyttävät ajonaikaista lupaa. Kutsu Notifications.requestPermissionsAsync()-metodia ja tarkista ennen jatkamista, että status on 'granted'.
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;
}Oletusilmoituskäsittelijän määrittäminen
Määritä yleinen ilmoituskäsittelijä Notifications.setNotificationHandler-metodilla hallitaksesi ilmoitusten toimintaa sovelluksen ollessa etualalla. Ilman tätä avoinna olevaan sovellukseen toimitetut ilmoitukset ohitetaan iOS:llä hiljaisesti. Kutsu metodia kerran moduulitasolla (minkään komponentin ulkopuolella), jotta se on aina aktiivinen.
import * as Notifications from 'expo-notifications';
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true, // show banner while app is open
shouldPlaySound: true,
shouldSetBadge: false,
}),
});Kertaluonteisen ilmoituksen ajastaminen
Notifications.scheduleNotificationAsync ajastaa ilmoituksen toimitettavaksi tiettynä ajankohtana. Laukaisin voi olla sekuntimäärä tästä hetkestä, tietty Date-objekti tai toistuva kalenterilaukaisin. Funktio palauttaa yksilöllisen ilmoitetunnisteen, jonka avulla voit tarvittaessa peruuttaa ilmoituksen myöhemmin.
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);
}Toistuvan ilmoituksen ajastaminen
Ajasta toistuva ilmoitus, kuten päivittäinen kello 8:n muistutus, käyttämällä kalenterilaukaisinta, jonka asetuksena on repeats: true. Määritä tunti, minuutti ja halutessasi viikonpäivä, jotta voit luoda minkä tahansa toistuvan aikataulun. Käyttöjärjestelmä toimittaa ilmoituksen määritettynä aikana ja ajastaa sen automaattisesti seuraavaa esiintymiskertaa varten.
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
},
});Ajastetun ilmoituksen peruuttaminen
Tallenna scheduleNotificationAsync-metodin palauttama ilmoitetunniste (esimerkiksi tilaan tai AsyncStorageen), jotta voit peruuttaa ilmoituksen myöhemmin. Peruuta tietty ilmoitus kutsumalla Notifications.cancelScheduledNotificationAsync(id)-metodia tallennetulla tunnisteella. Käytä metodia cancelAllScheduledNotificationsAsync(), jos haluat peruuttaa kaikki odottavat ilmoitukset kerralla.
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();Etualan ilmoitusten käsitteleminen
Käytä Notifications.addNotificationReceivedListener-kuuntelijaa reagoidaksesi ilmoituksen saapumiseen sovelluksen ollessa avoinna. Tämä on hyödyllistä sovelluksen sisäisten merkkien päivittämiseen, mukautetun äänen toistamiseen tai tietosyötteen päivittämiseen. Poista kuuntelija aina useEffectin siivousvaiheessa muistivuotojen estämiseksi.
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();
}, []);Ilmoitusten napautusten käsittely
Käytä Notifications.addNotificationResponseReceivedListener-kuuntelijaa käsitelläksesi tilanteen, jossa käyttäjä napauttaa ilmoitusbanneria. Tämä callback suoritetaan riippumatta siitä, oliko sovellus edustalla, taustalla vai suljettuna. Siirry sovelluksesi oikeaan näkymään käyttämällä mukautettua data-kenttää, jonka liitit ilmoitukseen ajoituksen yhteydessä.
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();
}, []);Kaikkien ajoitettujen ilmoitusten hakeminen
Kutsu Notifications.getAllScheduledNotificationsAsync()-metodia hakeaksesi luettelon kaikista odottavista ajoitetuista ilmoituksista. Tämä on hyödyllistä vianmäärityksessä, käyttäjien ajoitettujen ilmoitusten tarkasteluun ja poistamiseen tarkoitetun Reminders-hallintanäkymän näyttämisessä sekä päällekkäisten ajoitusten estämisessä, jos käyttäjä avaa asetusnäkymän uudelleen.
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)
);
});
}Merkit ja Android-kanavat
Aseta iOS:ssä sovelluksen merkin numero käyttämällä Notifications.setBadgeCountAsync(count)-metodia. Android 8:ssa ja uudemmissa ilmoitukset on liitettävä ilmoituskanavaan, joka hallitsee ääntä, värinää ja tärkeyttä. Luo kanava kerran sovelluksen käynnistyessä käyttämällä Notifications.setNotificationChannelAsync-metodia ja viittaa sen tunnisteeseen ilmoituksen channelId-kentässä.
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 },
});Pikatarkistus
Testaa, miten hyvin ymmärrät tämän oppitunnin React Native Mobile Development -aiheiset käsitteet.
Oppitunnin kertaus
Tässä oppitunnissa opit, että requestPermissionsAsync on hyväksyttävä ennen kuin yksikään ilmoitus voi näkyä, scheduleNotificationAsync toimittaa kertaluonteiset tai toistuvat ilmoitukset määritettyinä aikoina laukaisimen perusteella ja addNotificationResponseReceivedListener käsittelee käyttäjän napautukset, jotta käyttäjä voidaan ohjata oikeaan näkymään. Seuraavaksi tutustumme käyttöoikeuksien sujuvaan käsittelyyn.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Paikallisten ilmoitusten ajastaminen” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Paikallisten ilmoitusten ajastaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Paikallisten ilmoitusten ajastaminen”?
Asentakaa expo-notifications, pyytäkää käyttöoikeus, ajastakaa viiveen jälkeen näytettävä paikallinen ilmoitus ja käsitelkää ilmoituksen napautus navigoimalla tiettyyn näkymään. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Paikallisten ilmoitusten ajastaminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?
Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Kameran käyttö expo-cameralla
- GPS-sijainnin lukeminen expo-locationilla
- Paikallisten ilmoitusten ajastaminen
- Käyttöoikeuksien hallittu käsittely