Cours React Native · Module 7: Notifications
Canaux de notification (Android)
Dans cette leçon3
Android exige des canaux de notification depuis la version 8.0 (Oreo).
Créer des canaux
import * as Notifications from 'expo-notifications';
import { Platform } from 'react-native';
async function setupNotificationChannels() {
if (Platform.OS !== 'android') return;
// Canal pour les notifications importantes
await Notifications.setNotificationChannelAsync('urgent', {
name: 'Notifications urgentes',
importance: Notifications.AndroidImportance.MAX,
vibrationPattern: [0, 250, 250, 250],
lightColor: '#FF0000',
sound: 'alarm.wav',
enableVibrate: true,
enableLights: true,
});
// Canal pour les messages
await Notifications.setNotificationChannelAsync('messages', {
name: 'Messages',
importance: Notifications.AndroidImportance.HIGH,
sound: 'message.wav',
});
// Canal pour les rappels
await Notifications.setNotificationChannelAsync('reminders', {
name: 'Rappels',
importance: Notifications.AndroidImportance.DEFAULT,
});
// Canal pour le marketing (faible priorité)
await Notifications.setNotificationChannelAsync('marketing', {
name: 'Promotions et actualités',
importance: Notifications.AndroidImportance.LOW,
});
}Utiliser les canaux
// Envoi vers un canal précis
await Notifications.scheduleNotificationAsync({
content: {
title: 'Message urgent !',
body: 'Le système de sécurité de l\'Atlantide a été percé !',
},
trigger: null,
// Indiquer le canal pour Android
...(Platform.OS === 'android' && {
channelId: 'urgent',
}),
});Gérer les canaux
// Obtenir tous les canaux
const channels = await Notifications.getNotificationChannelsAsync();
// Obtenir un canal précis
const channel = await Notifications.getNotificationChannelAsync('urgent');
// Supprimer un canal
await Notifications.deleteNotificationChannelAsync('old-channel');Les canaux permettent aux utilisateurs de contrôler les différents types de notifications !
Code de cette leçon : App.tsx
import { useEffect } from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
import * as Notifications from 'expo-notifications';
// Configure les canaux de notification pour Android (depuis Android 8.0 Oreo)
async function setupNotificationChannels() {
if (Platform.OS !== 'android') return;
// TODO : crée le canal 'urgent' avec l'importance MAX
// utilise Notifications.setNotificationChannelAsync('urgent', { name, importance })
await Notifications.setNotificationChannelAsync('urgent', {
name: 'Notifications urgentes',
// TODO : définis importance à Notifications.AndroidImportance.MAX
importance: Notifications.AndroidImportance.DEFAULT,
});
// TODO : crée le canal 'reminders' avec l'importance HIGH
// await Notifications.setNotificationChannelAsync('reminders', { ... });
// TODO : crée le canal 'marketing' avec l'importance LOW
// await Notifications.setNotificationChannelAsync('marketing', { ... });
}
export default function App() {
useEffect(() => {
setupNotificationChannels();
}, []);
return (
<View style={styles.container}>
<Text style={styles.title}>Canaux 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' },
});
Entrées de la documentation utilisées dans cette leçon
Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. À partir de quelle version d'Android les canaux de notification sont-ils requis ?
2. Quelle valeur d'importance donne la plus haute priorité ?
Tâches pratiques dans le jeu
- Clique dans l'ordre
Clique sur les éléments de création du canal :
- Éditeur de code
Complète le code setNotificationChannelAsync.