react native push notification
8.1.1
React Native Notificações locais e remotas para iOS e Android
Este repositório não é mantido ativamente. O principal motivo é o tempo. A segunda é provavelmente a complexidade das notificações tanto no iOS quanto no Android. Já que este projeto provavelmente precisará de uma grande refatoração para corrigir algum problema ou implementar novos recursos. Acho que você provavelmente deveria considerar estas alternativas: Notifee gratuito desde setembro ou notificações nativas de reação.
Se você estiver interessado em ser um mantenedor deste projeto, fique à vontade para perguntar em questões.
Confira alterações e migrações no CHANGELOG:
Registro de alterações
Mantenedores são bem-vindos! Sinta-se à vontade para entrar em contato comigo
O Changelog está disponível a partir da versão 3.1.3 aqui: Changelog
npm install --save react-native-push-notification
yarn add react-native-push-notification
NOTA: Se você tem como alvo o iOS, também precisa seguir as instruções de instalação do PushNotificationIOS, pois este pacote depende disso.
NOTA: Para Android, você ainda terá que atualizar manualmente o AndroidManifest.xml (conforme abaixo) para usar notificações agendadas.
Está com algum problema? Leia o guia de solução de problemas antes de levantar um problema.
Por favor leia...
O componente usa PushNotificationIOS para a parte iOS. Você deve seguir as instruções de instalação.
NOTA: firebase-messaging , anterior à versão 15, requer o mesmo número de versão para funcionar corretamente em tempo de construção e em tempo de execução. Para usar uma versão específica:
No seu android/build.gradle
extensão {
googlePlayServicesVersion = "<Sua versão do Play Services>" // padrão: "+"firebaseMessagingVersion = "<Sua versão do Firebase>" // padrão: "21.1.0"// Outras configuraçõescompileSdkVersion = <Sua versão do SDK de compilação> // padrão: 23buildToolsVersion = "<Sua versão de ferramentas de construção>" // padrão: "23.0.1"targetSdkVersion = <Seu SDK de destino version> // padrão: 23supportLibVersion = "<Sua versão da biblioteca de suporte>" // padrão: 23.1.1}NOTA: localNotification() funciona sem alterações na parte da aplicação, enquanto localNotificationSchedule() funciona apenas com estas alterações:
No seu android/app/src/main/AndroidManifest.xml
.....
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<application ....><!-- Altere o valor para true para ativar o pop-up em primeiro plano ao receber notificações remotas (para evitar duplicação ao mostrar notificações locais, defina como false) --><meta-data android: name="com.dieam.reactnativepushnotification.notification_foreground"android:value="false"/><!-- Altere o nome do recurso para a cor de destaque do seu aplicativo - ou qualquer outra cor desejada --><meta-data android:name="com.dieam.reactnativepushnotification.notification_color"android:resource="@color/white"/> <!-- ou @android:color/{name} para usar uma cor padrão --><receiver android: name="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" />
<receptor android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
<receptor android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
<filtro de intenção>
<ação android:name="android.intent.action.BOOT_COMPLETED" />
<ação android:name="android.intent.action.QUICKBOOT_POWERON" />
<ação android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
</intent-filter>
</receptor>
<serviceandroid:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"android:exported="false" >
<filtro de intenção>
<action android:name="com.google.firebase.MESSAGING_EVENT" />
</intent-filter>
</serviço>
..... Se não estiver usando uma cor Android integrada ( @android:color/{name} ) para o item meta-data notification_color . Em android/app/src/main/res/values/colors.xml (crie o arquivo se ele não existir).
<recursos>
<color name="branco">#FFF</color>
</recursos> Se seu aplicativo tiver um @Override em onNewIntent em MainActivity.java , certifique-se de que a função inclua uma super chamada em onNewIntent (se seu MainActivity.java não tiver um @Override para onNewIntent, pule isto):
@Overridepublic void onNewIntent(Intent intent) {
...super.onNewIntent(intenção);
...
}Certifique-se de ter instalado o Firebase corretamente.
Em android/build.gradle
script de construção {...
dependências {...
classpath('com.google.gms:google-services:4.3.3')...
}
} Em android/app/build.gradle
dependências { ...
implementação 'com.google.firebase:firebase-analytics:17.3.0'
...
}
aplicar plug-in: 'com.google.gms.google-services' Em seguida, coloque seu google-services.json em android/app/ .
Nota: firebase/notas de lançamento
A biblioteca Firebase Android
firebase-corenão é mais necessária. Este SDK incluía o SDK do Firebase para Google Analytics.Agora, para usar o Analytics ou qualquer produto do Firebase que recomende o uso do Analytics (veja a tabela abaixo), você precisa adicionar explicitamente a dependência do Analytics:
com.google.firebase:firebase-analytics:17.3.0.
Em android/settings.gradle
...
incluir ':react-native-push-notification'project(':react-native-push-notification').projectDir = file('../node_modules/react-native-push-notification/android') No seu android/app/build.gradle
dependências {...
projeto de implementação(':react-native-push-notification')...
} Registre manualmente o módulo em MainApplication.java (se você não usou react-native link ):
importar com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage; // <--- Importar pacotepublic class MainApplication estende Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override protected boolean getUseDeveloperSupport() {return BuildConfig.DEBUG;
} @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new ReactNativePushNotificationPackage() // <---- Adicionar o pacote );
}
};
....
} NÃO USE .configure() DENTRO DE UM COMPONENTE, MESMO App
Se você fizer isso, os manipuladores de notificação não serão acionados, porque não estão carregados. Em vez disso, use
.configure()no primeiro arquivo do aplicativo, geralmenteindex.js.
import PushNotificationIOS from "@react-native-community/push-notification-ios";import PushNotification from "react-native-push-notification";// Deve estar fora de qualquer componente LifeCycle (como `componentDidMount`).PushNotification. configurar({
// (opcional) Chamado quando o Token é gerado (iOS e Android)
onRegister: função (token) {console.log("TOKEN:", token);
},
// (obrigatório) Chamado quando um controle remoto é recebido ou aberto, ou uma notificação local é aberta
onNotification: function (notification) {console.log("NOTIFICATION:", notificação);// processa a notificação // (obrigatório) Chamado quando um controle remoto é recebido ou aberto, ou uma notificação local é abertanotification.finish(PushNotificationIOS.FetchResult. SemDados);
},
// (opcional) Chamado quando Registered Action é pressionada e invocaApp é falso, se for verdadeiro onNotification será chamado (Android)
onAction: function (notification) {console.log("AÇÃO:", notificação.action);console.log("NOTIFICAÇÃO:", notificação);// processa a ação
},
// (opcional) Chamado quando o usuário não consegue se registrar para notificações remotas. Geralmente ocorre quando o APNS está com problemas ou o dispositivo é um simulador. (iOS)
onRegistrationError: function(err) {console.error(err.message, err);
},
// SOMENTE IOS (opcional): padrão: todos - Permissões para registrar.
permissões: {alerta: verdadeiro, emblema: verdadeiro, som: verdadeiro,
},
// A notificação inicial deve ser exibida automaticamente
// padrão: verdadeiro
popInitialNotification: verdadeiro,
/** * (opcional) padrão: true * - Especificado se as permissões (ios) e o token (android e ios) serão solicitados ou não, * - se não, você deve chamar PushNotificationsHandler.requestPermissions() mais tarde * - se não for usando notificação remota ou não tem o Firebase instalado, use isto: * requestPermissions: Platform.OS === 'ios' */
requestPermissions: verdadeiro,}); A pasta de exemplo contém um aplicativo de exemplo para demonstrar como usar este pacote. O tratamento da notificação é feito em NotifService.js .
Teste seus PRs com este aplicativo de exemplo antes de enviá-los. Isso ajudará a manter este repositório.
Quando alguma notificação é aberta ou recebida o callback onNotification é chamado passando um objeto com os dados da notificação.
Exemplo de objeto de notificação:
{foreground: false, // BOOLEAN: Se a notificação foi recebida em foreground ou notuserInteraction: false, // BOOLEAN: Se a notificação foi aberta pelo usuário da área de notificação ou notmessage: 'My Notification Message', // STRING: Os dados da mensagem de notificação: {}, // OBJETO: os dados push ou o userInfo definido nas notificações locais}PushNotification.localNotification (detalhes: Objeto)
EXEMPLO:
PushNotification.localNotification({
/* Propriedades somente do Android */
channelId: "your-channel-id", // (obrigatório) channelId, se o canal não existir, a notificação não será acionada.
ticker: "Meu ticker de notificação", // (opcional)
showWhen: true, // (opcional) padrão: true
autoCancel: true, // (opcional) padrão: true
largeIcon: "ic_launcher", // (opcional) padrão: "ic_launcher". Use "" para nenhum ícone grande.
largeIconUrl: "https://www.example.tld/picture.jpg", // (opcional) padrão: indefinido
smallIcon: "ic_notification", // (opcional) default: "ic_notification" com fallback para "ic_launcher". Use "" como ícone pequeno padrão.
bigText: "Meu texto grande que será mostrado quando a notificação for expandida. O estilo pode ser feito usando tags HTML (veja a documentação do Android para detalhes)", // (opcional) default: "message" prop
subText: "Este é um subTexto", // (opcional) padrão: nenhum
bigPictureUrl: "https://www.example.tld/picture.jpg", // (opcional) padrão: indefinido
bigLargeIcon: "ic_launcher", // (opcional) padrão: indefinido
bigLargeIconUrl: "https://www.example.tld/bigicon.jpg", // (opcional) padrão: indefinido
color: "red", // (opcional) padrão: padrão do sistema
vibrar: true, // (opcional) padrão: true
vibração: 300, // duração da vibração em milissegundos, ignorada se vibrate=false, padrão: 1000
tag: "some_tag", // (opcional) adiciona tag à mensagem
group: "group", // (opcional) adiciona grupo à mensagem
groupSummary: false, // (opcional) define esta notificação como o resumo do grupo de notificações, padrão: false
em andamento: false, // (opcional) define se esta é uma notificação "em andamento"
prioridade: "alta", // (opcional) define a prioridade de notificação, padrão: alta
Visibilidade: "privado", // (opcional) define a visibilidade da notificação, padrão: privado
ignoreInForeground: false, // (opcional) se for verdadeiro, a notificação não ficará visível quando o aplicativo estiver em primeiro plano (útil para paridade com a forma como as notificações do iOS aparecem). deve ser usado em combinação com a configuração `com.dieam.reactnativepushnotification.notification_foreground`
atalhoId: "shortcut-id", // (opcional) Se esta notificação for duplicada de um atalho do Launcher, define o id do atalho, caso o Launcher queira ocultar o atalho, padrão indefinido
onlyAlertOnce: false, // (opcional) o alerta será aberto apenas uma vez com som e notificação, padrão: false
quando: null, // (opcional) Adicione um carimbo de data/hora (valor de carimbo de data/hora Unix em milissegundos) referente à notificação (geralmente a hora em que o evento ocorreu). Para aplicativos direcionados a Build.VERSION_CODES.N e superiores, esse horário não é mais mostrado por padrão e deve ser ativado usando `showWhen`, padrão: null.
usaChronometer: false, // (opcional) Mostra o campo `when` como um cronômetro. Em vez de apresentar `quando` como um carimbo de data/hora, a notificação mostrará uma exibição atualizada automaticamente dos minutos e segundos desde quando. Útil ao mostrar um tempo decorrido (como uma chamada telefônica em andamento), padrão: falso.
timeoutAfter: null, // (opcional) Especifica uma duração em milissegundos após a qual esta notificação deve ser cancelada, se ainda não tiver sido cancelada, padrão: null
messageId: "google:message_id", // (opcional) adicionado como `message_id` aos extras de intenção para que a notificação push ao abrir possa encontrar dados armazenados pelo módulo @react-native-firebase/messaging.
ações: ["Sim", "Não"], // (somente Android) Consulte o documento para ações de notificação para saber mais
InvokeApp: true, // (opcional) Permite clicar em ações para trazer o aplicativo de volta para primeiro plano ou permanecer em segundo plano, padrão: true
/* Propriedades somente iOS */
categoria: "", // (opcional) padrão: string vazia
subtitle: "My Notification Subtitle", // (opcional) título menor abaixo do título da notificação
/* Propriedades iOS e Android */
id: 0, // (opcional) Inteiro válido e exclusivo de 32 bits especificado como string. padrão: ID exclusivo gerado automaticamente
title: "Meu título de notificação", // (opcional)
mensagem: "Minha mensagem de notificação", // (obrigatório)
picture: "https://www.example.tld/picture.jpg", // (opcional) Exibe uma imagem com a notificação, alias de `bigPictureUrl` para Android. padrão: indefinido
userInfo: {}, // (opcional) padrão: {} (usar null gera um erro de valor JSON '<null>')
playSound: false, // (opcional) padrão: true
soundName: "default", // (opcional) Som a ser reproduzido quando a notificação for mostrada. O valor 'default' reproduz o som padrão. Ele pode ser configurado para um som personalizado, como 'android.resource://com.xyz/raw/my_sound'. Ele irá procurar o arquivo de áudio 'my_sound' no diretório 'res/raw' e reproduzi-lo. padrão: 'default' (o som padrão é reproduzido)
number: 10, // (opcional) Inteiro válido de 32 bits especificado como string. padrão: nenhum (não pode ser zero)
repeatType: "day", // (opcional) Intervalo de repetição. Verifique a seção 'Notificações repetidas' para obter mais informações.});PushNotification.localNotificationSchedule (detalhes: Objeto)
EXEMPLO:
PushNotification.localNotificationSchedule({
//... Você pode usar todas as opções de localNotifications
mensagem: "Minha mensagem de notificação", // (obrigatório)
data: new Date(Date.now() + 60 * 1000), // em 60 segundos
permitirWhileIdle: false, // (opcional) define a notificação para funcionar durante o sono, padrão: false
/* Propriedades somente do Android */
RepeatTime: 1, // (opcional) Incremento do RepeatType configurado. Verifique a seção 'Notificações repetidas' para obter mais informações.});PushNotification.popInitialNotification(retorno de chamada)
EXEMPLO:
PushNotification.popInitialNotification((notificação) => {
console.log('Notificação inicial', notificação);}); No Android, adicione seu arquivo de som personalizado em [project_root]/android/app/src/main/res/raw
No iOS, adicione seu arquivo de som personalizado aos Resources do projeto no xCode.
Na notificação de localização json especifique o nome completo do arquivo:
soundName: 'my_sound.mp3'
Para usar canais, crie-os na inicialização e passe o channelId correspondente para PushNotification.localNotification ou PushNotification.localNotificationSchedule .
importar PushNotification, {Importância} de 'react-native-push-notification';... PushNotification.createChannel({ channelId: "channel-id", // (obrigatório) channelName: "Meu canal", // (obrigatório) channelDescription: "Um canal para categorizar suas notificações", // (opcional) default: undefined. playSound: false, // (opcional) default: true soundName: "default", // (opcional) Consulte Parâmetro `soundName` da função `localNotification` importância: Importance.HIGH, // (opcional) padrão: Importance.HIGH. Valor int da importância da notificação do Android vibrar: true, // (opcional) padrão: true. padrão se verdadeiro.},(criado) => console.log(`createChannel retornou '${criado}'`) // (opcional) retorno de chamada retorna se o canal foi criado, falso significa que ele já existia.
);NOTA: Sem canal, as notificações não funcionam
Nas opções de notificações, você deve fornecer um ID de canal com channelId: "your-channel-id" , se o canal não existir a notificação poderá não ser acionada. Depois que o canal for criado, ele não poderá ser atualizado. Certifique-se de que seu channelId seja diferente se você alterar essas opções. Se você criou um canal de outra forma, serão aplicadas as opções do canal.
Se quiser usar um canal padrão diferente para notificação remota, consulte a documentação do Firebase:
Configure um aplicativo cliente Firebase Cloud Messaging no Android
<metadados android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="@string/default_notification_channel_id" />
Para notificações locais, o mesmo tipo de opção está disponível:
você pode usar:
<metadados android:name="com.dieam.reactnativepushnotification.default_notification_channel_id" android:value="@string/default_notification_channel_id" />
Se não for definido, faça fallback para o valor do Firebase definido no AndroidManifest :
<metadados android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="..." />
Se não for definido, faça fallback para o ID padrão do canal do Firebase fcm_fallback_notification_channel
Você pode listar os canais disponíveis com:
PushNotification.getChannels (função (channel_ids) {
console.log(canal_ids); // ['canal_id_1']});Você pode verificar se existe um canal com:
PushNotification.channelExists(channel_id, função (existe) {
console.log(existe); // verdadeiro/falso});Você pode verificar se um canal foi bloqueado com:
PushNotification.channelBlocked(channel_id, função (bloqueada) {
console.log(bloqueado); // verdadeiro/falso});Você pode excluir um canal com:
PushNotification.deleteChannel(canal_id);
O parâmetro id para PushNotification.localNotification é necessário para esta operação. O ID fornecido será então usado para a operação de cancelamento.
PushNotification.localNotification({...id: '123'...});PushNotification.cancelLocalNotification('123' 
