Configuration de la boîte de réception des messages pour React Native

Le plugin Pushwoosh pour React Native inclut la boîte de réception des messages (l’icône en forme de cloche « App Inbox ») dans le même paquetage pushwoosh-react-native-plugin que celui utilisé pour les notifications push. Aucune étape d’installation supplémentaire n’est nécessaire.

Prérequis

Le SDK de base Pushwoosh pour React Native est déjà intégré et envoie des notifications push.

Afficher la boîte de réception

import Pushwoosh from 'pushwoosh-react-native-plugin';

Pushwoosh.presentInboxUI();

presentInboxUI() présente un écran natif (un contrôleur de vue sur iOS, une activité sur Android) en dehors de l’arborescence de vues de React, avec l’apparence par défaut du SDK.

Personnaliser le style

Passez un objet de style à presentInboxUI(). Les valeurs de couleur doivent passer par le processColor() de React Native. Chaque clé est facultative :

Clé	Personnalise
`dateFormat`	Formatage de la date
`defaultImageIcon`	L’icône par défaut à côté d’un message sans image
`unreadImage`	Le marqueur des messages non lus (iOS uniquement)
`listErrorImage`	Affichée en cas d’échec du chargement de la liste
`listEmptyImage`	Affichée lorsque la liste ne contient aucun message
`listErrorMessage`	Texte d’erreur (non localisé)
`listEmptyMessage`	Texte de liste vide (non localisé)
`defaultTextColor`	Couleur du texte par défaut (iOS uniquement)
`accentColor`	Couleur d’accentuation
`backgroundColor`	Couleur d’arrière-plan
`highlightColor`	Couleur de sélection
`titleColor`	Couleur du titre du message
`readTitleColor`	Couleur du titre pour les messages lus (Android uniquement)
`descriptionColor`	Couleur de la description du message
`readDescriptionColor`	Couleur de la description pour les messages lus (Android uniquement)
`dateColor`	Couleur de la date du message
`readDateColor`	Couleur de la date pour les messages lus (Android uniquement)
`dividerColor`	Couleur du séparateur
`barBackgroundColor`	La couleur d’arrière-plan de la barre de titre
`barAccentColor`	La couleur du bouton de retour de la barre de titre
`barTextColor`	La couleur du texte de la barre de titre

import Pushwoosh from 'pushwoosh-react-native-plugin';
import { processColor } from 'react-native';

Pushwoosh.presentInboxUI({
    dateFormat: "dd.MM.yyyy",
    accentColor: processColor('#3498db'),
    backgroundColor: processColor('#ffffff'),
    titleColor: processColor('#333333'),
    descriptionColor: processColor('#666666'),
    listEmptyMessage: "Aucun message pour le moment"
});

Gérer les messages par programmation

Chargez la liste des messages, les décomptes de lecture et agissez sur des messages individuels sans ouvrir l’écran intégré. Ceci est utile pour une interface utilisateur de boîte de réception personnalisée ou un badge de messages non lus :

Pushwoosh.loadMessages(
    (messages) => {
        messages.forEach((msg) => {
            console.log(msg.title + ": " + msg.message);
        });
    },
    (error) => console.error("Échec du chargement : " + error)
);

Pushwoosh.unreadMessagesCount((count) => {
    console.log("Messages non lus : " + count);
});

Pushwoosh.messagesCount((count) => { /* nombre total de messages */ });
Pushwoosh.messagesWithNoActionPerformedCount((count) => { /* messages sur lesquels aucune action n'a encore été effectuée */ });

Pushwoosh.readMessage(messageId);
Pushwoosh.deleteMessage(messageId);
Pushwoosh.performAction(messageId); // exécute l'action par défaut du message, par ex. l'ouverture d'une URL