Configuración de la Bandeja de Entrada de Mensajes para React Native

El plugin de Pushwoosh para React Native incluye la Bandeja de Entrada de Mensajes (el “icono de campana” de la Bandeja de Entrada de la App) como parte del mismo paquete pushwoosh-react-native-plugin que se utiliza para las notificaciones push. No se necesita ningún paso de instalación adicional.

Prerrequisitos

• El SDK base de Pushwoosh para React Native ya está integrado y enviando notificaciones push.

Mostrar la bandeja de entrada

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

Pushwoosh.presentInboxUI();

presentInboxUI() presenta una pantalla nativa (un view controller en iOS, una Activity en Android) fuera del árbol de vistas de React, con la apariencia predeterminada del SDK.

Personalizar el estilo

Pasa un objeto de estilo a presentInboxUI(). Los valores de color deben pasar por el processColor() de React Native. Cada clave es opcional:

Clave	Personaliza
dateFormat	Formato de fecha
defaultImageIcon	El icono predeterminado junto a un mensaje sin imagen
unreadImage	La marca de mensajes no leídos (solo iOS)
listErrorImage	Se muestra cuando falla la carga de la lista
listEmptyImage	Se muestra cuando la lista no tiene mensajes
listErrorMessage	Texto de error (no localizado)
listEmptyMessage	Texto de lista vacía (no localizado)
defaultTextColor	Color de texto predeterminado (solo iOS)
accentColor	Color de acento
backgroundColor	Color de fondo
highlightColor	Color de selección
titleColor	Color del título del mensaje
readTitleColor	Color del título para mensajes leídos (solo Android)
descriptionColor	Color de la descripción del mensaje
readDescriptionColor	Color de la descripción para mensajes leídos (solo Android)
dateColor	Color de la fecha del mensaje
readDateColor	Color de la fecha para mensajes leídos (solo Android)
dividerColor	Color del separador
barBackgroundColor	El color de fondo de la barra de título
barAccentColor	El color del botón de retroceso de la barra de título
barTextColor	El color del texto de la barra de título

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: "Aún no hay mensajes"
});

Gestionar mensajes programáticamente

Carga la lista de mensajes, los recuentos de leídos y actúa sobre mensajes individuales sin abrir la pantalla integrada. Esto es útil para una interfaz de usuario de bandeja de entrada personalizada o una insignia de no leídos:

Pushwoosh.loadMessages(
    (messages) => {
        messages.forEach((msg) => {
            console.log(msg.title + ": " + msg.message);
        });
    },
    (error) => console.error("Fallo al cargar: " + error)
);

Pushwoosh.unreadMessagesCount((count) => {
    console.log("Mensajes no leídos: " + count);
});

Pushwoosh.messagesCount((count) => { /* mensajes totales */ });
Pushwoosh.messagesWithNoActionPerformedCount((count) => { /* aún no se ha actuado sobre ellos */ });

Pushwoosh.readMessage(messageId);
Pushwoosh.deleteMessage(messageId);
Pushwoosh.performAction(messageId); // ejecuta la acción predeterminada del mensaje, por ejemplo, abrir una URL