Kurs React Native · Moduł 7: Powiadomienia
Notification Channels (Android)
W tej lekcji3
Android wymaga kanałów powiadomień od wersji 8.0 (Oreo).
Tworzenie kanałów
import * as Notifications from 'expo-notifications';
import { Platform } from 'react-native';
async function setupNotificationChannels() {
if (Platform.OS !== 'android') return;
// Kanał dla ważnych powiadomień
await Notifications.setNotificationChannelAsync('urgent', {
name: 'Pilne powiadomienia',
importance: Notifications.AndroidImportance.MAX,
vibrationPattern: [0, 250, 250, 250],
lightColor: '#FF0000',
sound: 'alarm.wav',
enableVibrate: true,
enableLights: true,
});
// Kanał dla wiadomości
await Notifications.setNotificationChannelAsync('messages', {
name: 'Wiadomości',
importance: Notifications.AndroidImportance.HIGH,
sound: 'message.wav',
});
// Kanał dla przypomnień
await Notifications.setNotificationChannelAsync('reminders', {
name: 'Przypomnienia',
importance: Notifications.AndroidImportance.DEFAULT,
});
// Kanał dla marketingu (niski priorytet)
await Notifications.setNotificationChannelAsync('marketing', {
name: 'Promocje i nowości',
importance: Notifications.AndroidImportance.LOW,
});
}Używanie kanałów
// Wysyłanie na konkretny kanał
await Notifications.scheduleNotificationAsync({
content: {
title: 'Pilna wiadomość!',
body: 'System bezpieczeństwa Atlantydy został naruszon!',
},
trigger: null,
// Określ kanał dla Android
...(Platform.OS === 'android' && {
channelId: 'urgent',
}),
});Zarządzanie kanałami
// Pobierz wszystkie kanały
const channels = await Notifications.getNotificationChannelsAsync();
// Pobierz konkretny kanał
const channel = await Notifications.getNotificationChannelAsync('urgent');
// Usuń kanał
await Notifications.deleteNotificationChannelAsync('old-channel');Kanały pozwalają użytkownikom kontrolować różne typy powiadomień!
Kod do tej lekcji: App.tsx
import { useEffect } from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
import * as Notifications from 'expo-notifications';
// Konfiguracja kanałów powiadomień dla Android (od Android 8.0 Oreo)
async function setupNotificationChannels() {
if (Platform.OS !== 'android') return;
// TODO: stwórz kanał 'urgent' z importance MAX
// użyj Notifications.setNotificationChannelAsync('urgent', { name, importance })
await Notifications.setNotificationChannelAsync('urgent', {
name: 'Pilne powiadomienia',
// TODO: ustaw importance na Notifications.AndroidImportance.MAX
importance: Notifications.AndroidImportance.DEFAULT,
});
// TODO: stwórz kanał 'reminders' z importance HIGH
// await Notifications.setNotificationChannelAsync('reminders', { ... });
// TODO: stwórz kanał 'marketing' z importance LOW
// await Notifications.setNotificationChannelAsync('marketing', { ... });
}
export default function App() {
useEffect(() => {
setupNotificationChannels();
}, []);
return (
<View style={styles.container}>
<Text style={styles.title}>Kanały Android</Text>
<Text style={styles.info}>urgent • reminders • marketing</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#1a5276' },
title: { fontSize: 24, color: '#fff', marginBottom: 12 },
info: { fontSize: 14, color: '#aed6f1' },
});
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. Od której wersji Android kanały powiadomień są wymagane?
2. Która wartość importance daje najwyższy priorytet?
Zadania praktyczne w grze
- Klikanie w kolejności
Kliknij elementy tworzenia kanału:
- Edytor kodu
Uzupełnij kod setNotificationChannelAsync.