Kurs React Native · Moduł 7: Powiadomienia
Lokalne powiadomienia
W tej lekcji3
Lokalne powiadomienia nie wymagają serwera - są generowane bezpośrednio na urządzeniu.
Wysyłanie lokalnego powiadomienia
import * as Notifications from 'expo-notifications';
// Natychmiastowe powiadomienie
async function sendLocalNotification() {
await Notifications.scheduleNotificationAsync({
content: {
title: 'Wiadomość z Atlantydy!',
body: 'Posejdon ma dla ciebie nowe zadanie.',
data: { screen: 'Tasks', taskId: '123' },
sound: true,
badge: 1,
},
trigger: null, // null = natychmiast
});
}
// Powiadomienie z opóźnieniem
async function scheduleNotification() {
await Notifications.scheduleNotificationAsync({
content: {
title: 'Przypomnienie',
body: 'Nie zapomnij o treningu!',
},
trigger: {
seconds: 60, // za 60 sekund
},
});
}
// Powiadomienie o konkretnej godzinie
async function scheduleDailyReminder() {
await Notifications.scheduleNotificationAsync({
content: {
title: 'Dzień dobry!',
body: 'Czas na poranną pływacką sesję.',
},
trigger: {
hour: 8,
minute: 0,
repeats: true, // codziennie
},
});
}
// Powiadomienie na konkretną datę
async function scheduleEventReminder(eventDate: Date) {
await Notifications.scheduleNotificationAsync({
content: {
title: 'Wydarzenie już jutro!',
body: 'Festiwal Posejdona rozpoczyna się jutro.',
},
trigger: eventDate,
});
}Anulowanie powiadomień
// Anuluj konkretne
const notificationId = await Notifications.scheduleNotificationAsync({...});
await Notifications.cancelScheduledNotificationAsync(notificationId);
// Anuluj wszystkie zaplanowane
await Notifications.cancelAllScheduledNotificationsAsync();
// Pobierz listę zaplanowanych
const scheduled = await Notifications.getAllScheduledNotificationsAsync();Zarządzanie badge
// Ustaw badge
await Notifications.setBadgeCountAsync(5);
// Pobierz aktualny badge
const count = await Notifications.getBadgeCountAsync();
// Wyczyść badge
await Notifications.setBadgeCountAsync(0);Lokalne powiadomienia są idealne do przypomnień i alertów offline!
Kod do tej lekcji: App.tsx
import { View, Text, Button, StyleSheet } from 'react-native';
import * as Notifications from 'expo-notifications';
// Lokalne powiadomienie po 1 godzinie
async function scheduleReminderInOneHour() {
// TODO: wywołaj Notifications.scheduleNotificationAsync({ ... })
// content powinien zawierać title oraz body
// trigger ustaw na { seconds: 3600 } (1 godzina)
await Notifications.scheduleNotificationAsync({
content: {
title: 'Przypomnienie z Atlantydy',
// TODO: dodaj body z treścią przypomnienia
body: '',
},
// TODO: ustaw trigger na 1 godzinę (3600 sekund)
trigger: null,
});
}
// Natychmiastowe powiadomienie (trigger: null)
async function sendNow() {
// TODO: wyślij powiadomienie natychmiast (trigger: null)
}
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.title}>Przypomnienia</Text>
<Button title="Przypomnij za godzinę" onPress={scheduleReminderInOneHour} />
<Button title="Wyślij teraz" onPress={sendNow} />
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#1a5276', gap: 16 },
title: { fontSize: 24, color: '#fff' },
});
Hasła z dokumentacji w tej lekcji
Widzisz błąd w tej lekcji?
Sprawdź się
Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.
1. Jak wysłać natychmiastowe lokalne powiadomienie?
2. Jak zaplanować powiadomienie za 60 sekund?
To 2 z 4 pytań do tej lekcji. Pozostałe rozwiążesz w grze.
Zadania praktyczne w grze
- Klikanie w kolejności
Kliknij elementy content powiadomienia w kolejności:
- Układanie w poziomie
Ułóż trigger dla codziennego przypomnienia o 8:00:
- Edytor kodu
Uzupełnij kod schedulowanego powiadomienia.
- Klikanie w kolejności
Kliknij elementy ustawiania badge: