Kurs React Native · Moduł 7: Powiadomienia

Lokalne powiadomienia

2 min czytania ·
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. 1. Jak wysłać natychmiastowe lokalne powiadomienie?

  2. 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:

Przydatne artykuły