Configurando a Caixa de Entrada de Mensagens para React Native

O plugin Pushwoosh para React Native inclui a Caixa de Entrada de Mensagens (o ícone de sino da Caixa de Entrada do App) como parte do mesmo pacote pushwoosh-react-native-plugin usado para notificações push. Nenhuma etapa de instalação extra é necessária.

Pré-requisitos

O SDK base do Pushwoosh para React Native já integrado e enviando pushes.

Mostrar a caixa de entrada

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

Pushwoosh.presentInboxUI();

presentInboxUI() apresenta uma tela nativa (um view controller no iOS, uma Activity no Android) fora da árvore de visualização do React, com a aparência padrão do SDK.

Personalizar o estilo

Passe um objeto de estilo para presentInboxUI(). Os valores de cor devem passar pelo processColor() do React Native. Cada chave é opcional:

Chave	Personaliza
`dateFormat`	Formatação da data
`defaultImageIcon`	O ícone padrão ao lado de uma mensagem sem imagem
`unreadImage`	A marca de mensagens não lidas (somente iOS)
`listErrorImage`	Exibido quando o carregamento da lista falha
`listEmptyImage`	Exibido quando a lista não tem mensagens
`listErrorMessage`	Texto de erro (não localizado)
`listEmptyMessage`	Texto de lista vazia (não localizado)
`defaultTextColor`	Cor de texto padrão (somente iOS)
`accentColor`	Cor de destaque
`backgroundColor`	Cor de fundo
`highlightColor`	Cor de seleção
`titleColor`	Cor do título da mensagem
`readTitleColor`	Cor do título para mensagens lidas (somente Android)
`descriptionColor`	Cor da descrição da mensagem
`readDescriptionColor`	Cor da descrição para mensagens lidas (somente Android)
`dateColor`	Cor da data da mensagem
`readDateColor`	Cor da data para mensagens lidas (somente Android)
`dividerColor`	Cor do separador
`barBackgroundColor`	A cor de fundo da barra de título
`barAccentColor`	A cor do botão de voltar da barra de título
`barTextColor`	A cor do texto da 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: "No messages yet"
});

Gerenciar mensagens programaticamente

Carregue a lista de mensagens, contagens de leitura e execute ações em mensagens individuais sem abrir a tela integrada. Isso é útil para uma interface de caixa de entrada personalizada ou um selo de não lido:

Pushwoosh.loadMessages(
    (messages) => {
        messages.forEach((msg) => {
            console.log(msg.title + ": " + msg.message);
        });
    },
    (error) => console.error("Falha ao carregar: " + error)
);

Pushwoosh.unreadMessagesCount((count) => {
    console.log("Mensagens não lidas: " + count);
});

Pushwoosh.messagesCount((count) => { /* total de mensagens */ });
Pushwoosh.messagesWithNoActionPerformedCount((count) => { /* nenhuma ação executada ainda */ });

Pushwoosh.readMessage(messageId);
Pushwoosh.deleteMessage(messageId);
Pushwoosh.performAction(messageId); // executa a ação padrão da mensagem, por exemplo, abrir uma URL