react native push notification
8.1.1
React Notificaciones nativas locales y remotas para iOS y Android
Este repositorio no se mantiene activamente. La razón principal es el tiempo. El segundo es probablemente la complejidad de las notificaciones tanto en iOS como en Android. Dado que este proyecto probablemente necesite una gran refactorización para solucionar algún problema o implementar nuevas funciones. Creo que probablemente deberías considerar estas alternativas: Notifee gratis desde septiembre o reaccionar-notificaciones nativas.
Si está interesado en ser mantenedor de este proyecto, no dude en preguntar en issues.
Consulte los cambios y la migración en CHANGELOG:
Registro de cambios
¡Los mantenedores son bienvenidos! No dudes en contactarme
El registro de cambios está disponible desde la versión 3.1.3 aquí: Registro de cambios
npm install --save react-native-push-notification
yarn add react-native-push-notification
NOTA: Si su objetivo es iOS, también debe seguir las instrucciones de instalación de PushNotificationIOS, ya que este paquete depende de ello.
NOTA: Para Android, aún tendrá que actualizar manualmente AndroidManifest.xml (como se muestra a continuación) para poder utilizar las notificaciones programadas.
¿Tienes un problema? Lea la guía de solución de problemas antes de plantear un problema.
Por favor lea...
El componente utiliza PushNotificationIOS para la parte de iOS. Debes seguir sus instrucciones de instalación.
NOTA: firebase-messaging , antes de la versión 15, requiere tener el mismo número de versión para funcionar correctamente en el tiempo de compilación y en el tiempo de ejecución. Para utilizar una versión específica:
En tu android/build.gradle
texto {
googlePlayServicesVersion = "<Su versión de servicios de juego>" // predeterminado: "+"firebaseMessagingVersion = "<Su versión de Firebase>" // predeterminado: "21.1.0"// Otras configuracionescompileSdkVersion = <Su versión de SDK de compilación> // predeterminado: 23buildToolsVersion = "<Su versión de herramientas de compilación>" // predeterminado: "23.0.1"targetSdkVersion = <Su objetivo Versión del SDK> // predeterminado: 23supportLibVersion = "<Su versión de biblioteca de soporte>" // predeterminado: 23.1.1}NOTA: localNotification() funciona sin cambios en la parte de la aplicación, mientras que localNotificationSchedule() solo funciona con estos cambios:
En tu android/app/src/main/AndroidManifest.xml
.....
<usa-permiso android:name="android.permission.VIBRATE" />
<usa-permiso android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<aplicación ....><!-- Cambie el valor a verdadero para habilitar la ventana emergente en primer plano al recibir notificaciones remotas (para evitar duplicaciones mientras se muestran notificaciones locales, establezca esto en falso) --><metadatos de Android: name="com.dieam.reactnativepushnotification.notification_foreground"android:value="false"/>><!-- Cambie el nombre del recurso al color de acento de su aplicación, o cualquier otro color que desee --><meta-data android:name="com.dieam.reactnativepushnotification.notification_color"android:resource="@color/white"/> <!-- o @android:color/{name} para usar un color estándar --><receptor android: nombre="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" />
<receptor android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
<receptor android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
<filtro-intención>
<acción android:nombre="android.intent.action.BOOT_COMPLETED" />
<acción android:nombre="android.intent.action.QUICKBOOT_POWERON" />
<acción android:nombre="com.htc.intent.action.QUICKBOOT_POWERON"/>
</intent-filter>
</receptor>
<serviceandroid:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"android:exported="false" >
<filtro-intención>
<acción android:name="com.google.firebase.MESSAGING_EVENT" />
</intent-filter>
</servicio>
..... Si no utiliza un color integrado de Android ( @android:color/{name} ) para el elemento de meta-data notification_color . En android/app/src/main/res/values/colors.xml (Cree el archivo si no existe).
<recursos>
<color nombre="blanco">#FFF</color>
</recursos> Si su aplicación tiene un @Override en onNewIntent en MainActivity.java , asegúrese de que la función incluya una súper llamada en onNewIntent (si su MainActivity.java no tiene un @Override para onNewIntent, omita esto):
@Overridepublic void onNewIntent (intención de intención) {
...super.onNewIntent(intención);
...
}Asegúrese de haber instalado Firebase correctamente.
En android/build.gradle
script de compilación {...
dependencias {...
classpath('com.google.gms:google-services:4.3.3')...
}
} En android/app/build.gradle
dependencias {...
implementación 'com.google.firebase:firebase-analytics:17.3.0'
...
}
aplicar complemento: 'com.google.gms.google-services' Luego coloque su google-services.json en android/app/ .
Nota: firebase/notas de la versión
La biblioteca Firebase de Android
firebase-coreya no es necesaria. Este SDK incluía el SDK de Firebase para Google Analytics.Ahora, para usar Analytics o cualquier producto de Firebase que recomiende el uso de Analytics (consulte la tabla a continuación), debe agregar explícitamente la dependencia de Analytics:
com.google.firebase:firebase-analytics:17.3.0.
En android/settings.gradle
...
incluir ':react-native-push-notification'project(':react-native-push-notification').projectDir = file('../node_modules/react-native-push-notification/android') En tu android/app/build.gradle
dependencias {...
proyecto de implementación(':react-native-push-notification')...
} Registre manualmente el módulo en MainApplication.java (si no utilizó react-native link ):
importar com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage; // <--- Importar paquetepublic class MainApplication extiende la aplicación implementa ReactApplication { privado 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() // <---- Agregar el paquete);
}
};
....
} NO UTILICE .configure() DENTRO DE UN COMPONENTE, NI INCLUSO DE App
Si lo hace, los controladores de notificaciones no se activarán porque no están cargados. En su lugar, use
.configure()en el primer archivo de la aplicación, generalmenteindex.js.
importar PushNotificationIOS desde "@react-native-community/push-notification-ios";importar PushNotification desde "react-native-push-notification";// Debe estar fuera del ciclo de vida de cualquier componente (como `componentDidMount`).PushNotification. configurar({
// (opcional) Se llama cuando se genera el token (iOS y Android)
onRegister: función (token) {console.log("TOKEN:", token);
},
// (obligatorio) Se llama cuando se recibe o abre un control remoto o se abre una notificación local
onNotification: función (notificación) {console.log("NOTIFICACIÓN:", notificación);// procesar la notificación// (obligatorio) Se llama cuando se recibe o abre un control remoto, o se abre una notificación localnotification.finish(PushNotificationIOS.FetchResult. Sin datos);
},
// (opcional) Se llama cuando se presiona Acción registrada y invokeApp es falso; si es verdadero, se llamará a onNotification (Android)
onAction: función (notificación) {console.log("ACCIÓN:", notificación.acción);console.log("NOTIFICACIÓN:", notificación);// procesar la acción
},
// (opcional) Se llama cuando el usuario no se registra para recibir notificaciones remotas. Normalmente ocurre cuando APNS tiene problemas o el dispositivo es un simulador. (iOS)
onRegistrationError: función(err) {console.error(err.message, err);
},
// SÓLO IOS (opcional): predeterminado: todos - Permisos para registrarse.
permisos: {alerta: verdadero, insignia: verdadero, sonido: verdadero,
},
// ¿Debería aparecer la notificación inicial automáticamente?
// predeterminado: verdadero
popInitialNotification: verdadero,
/** * (opcional) predeterminado: verdadero * - Especifica si los permisos (ios) y el token (android e ios) se solicitarán o no, * - si no, debe llamar a PushNotificationsHandler.requestPermissions() más tarde * - si no usando notificación remota o no tiene Firebase instalado, use esto: * requestPermissions: Platform.OS === 'ios' */
requestPermissions: verdadero,}); La carpeta de ejemplo contiene una aplicación de ejemplo para demostrar cómo utilizar este paquete. El manejo de notificaciones se realiza en NotifService.js .
Pruebe sus relaciones públicas con esta aplicación de ejemplo antes de enviarlas. Ayudará a mantener este repositorio.
Cuando se abre o recibe una notificación, se llama a la devolución de llamada onNotification pasando un objeto con los datos de la notificación.
Ejemplo de objeto de notificación:
{foreground: false, // BOOLEAN: Si la notificación se recibió en primer plano o notuserInteraction: false, // BOOLEAN: Si la notificación fue abierta por el usuario desde el área de notificación o notmessage: 'Mi mensaje de notificación', // STRING: Los datos del mensaje de notificación: {}, // OBJETO: Los datos push o la información de usuario definida en las notificaciones locales}PushNotification.localNotification (detalles: Objeto)
EJEMPLO:
PushNotification.localNotificación ({
/* Propiedades sólo de Android */
channelId: "your-channel-id", // (obligatorio) channelId, si el canal no existe, la notificación no se activará.
ticker: "Mi ticker de notificaciones", // (opcional)
showWhen: verdadero, // (opcional) predeterminado: verdadero
autoCancel: verdadero, // (opcional) predeterminado: verdadero
largeIcon: "ic_launcher", // (opcional) predeterminado: "ic_launcher". Utilice "" si no hay un icono grande.
largeIconUrl: "https://www.example.tld/picture.jpg", // (opcional) predeterminado: indefinido
SmallIcon: "ic_notification", // (opcional) predeterminado: "ic_notification" con respaldo para "ic_launcher". Utilice "" para el icono pequeño predeterminado.
bigText: "Mi texto grande se mostrará cuando se expanda la notificación. El estilo se puede realizar usando etiquetas HTML (consulte los documentos de Android para obtener más detalles)", // (opcional) predeterminado: accesorio "mensaje"
subTexto: "Este es un subTexto", // (opcional) predeterminado: ninguno
bigPictureUrl: "https://www.example.tld/picture.jpg", // (opcional) predeterminado: indefinido
bigLargeIcon: "ic_launcher", // (opcional) predeterminado: indefinido
bigLargeIconUrl: "https://www.example.tld/bigicon.jpg", // (opcional) predeterminado: indefinido
color: "rojo", // (opcional) predeterminado: predeterminado del sistema
vibrar: verdadero, // (opcional) predeterminado: verdadero
vibración: 300, // duración de la vibración en milisegundos, ignorada si vibrar=false, predeterminado: 1000
etiqueta: "some_tag", // (opcional) agregar etiqueta al mensaje
grupo: "grupo", // (opcional) agregar grupo al mensaje
groupSummary: false, // (opcional) configura esta notificación para que sea el resumen de grupo de un grupo de notificaciones, predeterminado: false
en curso: falso, // (opcional) establece si se trata de una notificación "en curso"
prioridad: "alta", // (opcional) establece la prioridad de notificación, valor predeterminado: alta
visibilidad: "privado", // (opcional) establece la visibilidad de las notificaciones, predeterminado: privado
ignoreInForeground: false, // (opcional) si es verdadero, la notificación no será visible cuando la aplicación esté en primer plano (útil para la paridad con la forma en que aparecen las notificaciones de iOS). debe usarse en combinación con la configuración `com.dieam.reactnativepushnotification.notification_foreground`
shortcutId: "shortcut-id", // (opcional) Si esta notificación es una duplicación de un acceso directo del Lanzador, establece la identificación del acceso directo, en caso de que el Lanzador quiera ocultar el acceso directo, predeterminado no definido
onlyAlertOnce: false, // (opcional) la alerta se abrirá solo una vez con sonido y notificará, predeterminado: false
cuando: nulo, // (opcional) Agregue una marca de tiempo (valor de marca de tiempo de Unix en milisegundos) correspondiente a la notificación (generalmente la hora en que ocurrió el evento). Para las aplicaciones orientadas a Build.VERSION_CODES.N y superiores, este tiempo ya no se muestra de forma predeterminada y se debe habilitar usando `showWhen`, predeterminado: nulo.
usesChronometer: false, // (opcional) Muestra el campo `cuándo` como un cronómetro. En lugar de presentar "cuándo" como una marca de tiempo, la notificación mostrará una visualización actualizada automáticamente de los minutos y segundos desde cuándo. Útil cuando se muestra un tiempo transcurrido (como una llamada telefónica en curso), valor predeterminado: falso.
timeoutAfter: null, // (opcional) Especifica una duración en milisegundos después de la cual esta notificación debe cancelarse, si aún no está cancelada, valor predeterminado: null
messageId: "google:message_id", // (opcional) agregado como `message_id` para intentar extras para que al abrir la notificación push se puedan encontrar datos almacenados en el módulo @react-native-firebase/messaging.
acciones: ["Sí", "No"], // (solo Android) Consulte el documento para conocer las acciones de notificación para saber más
invokeApp: true, // (opcional) Esto permite hacer clic en acciones para devolver la aplicación al primer plano o permanecer en segundo plano, predeterminado: true
/* Propiedades sólo para iOS */
categoría: "", // (opcional) predeterminado: cadena vacía
subtítulo: "Mi subtítulo de notificación", // (opcional) título más pequeño debajo del título de la notificación
/* Propiedades de iOS y Android */
id: 0, // (opcional) Entero único válido de 32 bits especificado como cadena. predeterminado: ID único generado automáticamente
título: "Título de mi notificación", // (opcional)
mensaje: "Mi mensaje de notificación", // (obligatorio)
imagen: "https://www.example.tld/picture.jpg", // (opcional) Muestra una imagen con la notificación, alias de `bigPictureUrl` para Android. predeterminado: indefinido
userInfo: {}, // (opcional) predeterminado: {} (el uso de null arroja un error de valor JSON '<null>')
playSound: falso, // (opcional) predeterminado: verdadero
soundName: "default", // (opcional) Sonido que se reproducirá cuando se muestre la notificación. El valor de 'predeterminado' reproduce el sonido predeterminado. Se puede configurar con un sonido personalizado como 'android.resource://com.xyz/raw/my_sound'. Buscará el archivo de audio 'my_sound' en el directorio 'res/raw' y lo reproducirá. predeterminado: 'predeterminado' (se reproduce el sonido predeterminado)
número: 10, // (opcional) Entero válido de 32 bits especificado como cadena. predeterminado: ninguno (no puede ser cero)
repetirTipo: "día", // (opcional) Intervalo de repetición. Consulte la sección 'Notificaciones repetidas' para obtener más información.});PushNotification.localNotificationSchedule (detalles: Objeto)
EJEMPLO:
PushNotification.localNotificationSchedule({
//... Puedes usar todas las opciones de localNotifications
mensaje: "Mi mensaje de notificación", // (obligatorio)
fecha: nueva Fecha(Date.now() + 60 * 1000), // en 60 segundos
enableWhileIdle: false, // (opcional) configura la notificación para que funcione mientras estás dormido, predeterminado: false
/* Propiedades sólo de Android */
repetirTime: 1, // (opcional) Incremento del tipo de repetición configurado. Consulte la sección 'Notificaciones repetidas' para obtener más información.});PushNotification.popInitialNotification (devolución de llamada)
EJEMPLO:
PushNotification.popInitialNotification((notificación) => {
console.log('Notificación inicial', notificación);}); En Android, agregue su archivo de sonido personalizado a [project_root]/android/app/src/main/res/raw
En iOS, agregue su archivo de sonido personalizado a los Resources del proyecto en xCode.
En el json de notificación de ubicación, especifique el nombre completo del archivo:
soundName: 'my_sound.mp3'
Para usar canales, créelos al inicio y pase el channelId correspondiente a PushNotification.localNotification o PushNotification.localNotificationSchedule .
importar PushNotification, {Importancia} de 'react-native-push-notification';... PushNotification.createChannel({ channelId: "channel-id", // (obligatorio) channelName: "Mi canal", // (obligatorio) channelDescription: "Un canal para categorizar sus notificaciones", // (opcional) predeterminado: undefinido playSound: false, // (opcional) predeterminado: true soundName: "default", // (opcional) Consulte el parámetro `soundName` de la función `localNotification` importancia: Importancia.HIGH, // (opcional) predeterminado: Importancia.HIGH. Valor int de la vibración de importancia de la notificación de Android: verdadero, // (opcional) predeterminado: verdadero Crea el valor predeterminado. patrón de vibración si es verdadero.},(creado) => console.log(`createChannel devolvió '${creado}'`) // (opcional) la devolución de llamada devuelve si el canal fue creado, falso significa que ya existía.
);NOTA: Sin canal, las notificaciones no funcionan
En las opciones de notificaciones, debe proporcionar una identificación de canal con channelId: "your-channel-id" ; si el canal no existe, es posible que la notificación no se active. Una vez creado el canal, no se puede actualizar. Asegúrese de que su channelId sea diferente si cambia estas opciones. Si ha creado un canal de otra manera, se aplicarán las opciones del canal.
Si desea utilizar un canal predeterminado diferente para la notificación remota, consulte la documentación de Firebase:
Configurar una aplicación cliente de Firebase Cloud Messaging en Android
<metadatos android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="@string/default_notification_channel_id" />
Para notificaciones locales, está disponible el mismo tipo de opción:
puedes usar:
<metadatos android:name="com.dieam.reactnativepushnotification.default_notification_channel_id" android:value="@string/default_notification_channel_id" />
Si no está definido, recurra al valor de Firebase definido en AndroidManifest :
<metadatos android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="..." />
Si no está definido, recurra al ID de canal predeterminado de Firebase fcm_fallback_notification_channel
Puede enumerar los canales disponibles con:
PushNotification.getChannels(función (channel_ids) {
console.log(channel_ids); // ['channel_id_1']});Puedes comprobar si existe un canal con:
PushNotification.channelExists(channel_id, función (existe) {
console.log(existe); // verdadero/falso});Puedes comprobar si un canal está bloqueado con:
PushNotification.channelBlocked(channel_id, función (bloqueada) {
console.log(bloqueado); // verdadero/falso});Puedes eliminar un canal con:
PushNotification.deleteChannel(channel_id);
El parámetro id para PushNotification.localNotification es necesario para esta operación. La identificación proporcionada se utilizará para la operación de cancelación.
PushNotification.localNotification({...id: '123'...});PushNotification.cancelLocalNotification('123' 
