Generalidades

Reaccionar las notificaciones push locales nativas | Saad Khan | Agosto de 2021

Saad Khan
1*WcDgNHyaRvkPq3MyocAFWg
Foto de Jamie Street en Unsplash

Muchas veces en nuestra aplicación, necesitamos configurar notificaciones push locales. ¿Qué significa notificación local? Básicamente, las notificaciones push no se activan desde los servicios en la nube, por ejemplo, la notificación push de base de fuego es un servicio de notificaciones push remotas. Del mismo modo, tenemos otros servicios de notificaciones push para notificaciones remotas.

Sin embargo, a veces solo queremos configurar notificaciones desde el lado de nuestra aplicación. Supongamos que tenemos un sistema de recordatorio en nuestra aplicación, cuando el usuario establece la hora, necesitamos establecer una notificación a esa hora específica.

nosotrosSubirEntiendo en esta publicación de blog cómo logramos este objetivo. Usaremos un paquete muy bueno llamado react-native-push-notification. En este artículo, mostraré la parte de Android y en el próximo artículo escribiré sobre iOS.

¡Empecemos! Primero, necesitamos una aplicación de demostración para mostrar que nuestras notificaciones están funcionando. Entonces, creemos una aplicación de demostración.

Para fines de demostración, necesitamos tener una entrada DateTime para que el usuario pueda establecer la hora de notificación. Para el selector de fecha y hora, instalaré react-native-date-picker. Después de instalar este paquete, configuraremos nuestro componente de demostración.

A través de lo anterior, obtenemos el siguiente resultado.

Nuestra aplicación de demostración está configurada. Ahora pasemos al foco principal de las notificaciones de esta publicación de blog. Primero, quiero instalar el paquete de notificaciones.

No olvide instalar pod para iOS. Básicamente, podemos seguir el archivo Léame en el paquete, pero dado que nuestro enfoque principal son las notificaciones push locales, ignoraremos todo lo relacionado con la configuración de la base de fuego en la documentación.

Simplemente copie y pegue las siguientes partes en su AndroidManifest.xml Archivos dentro <application> Y no olvide cambiar el nombre de la aplicación de acuerdo con el nombre de su aplicación si es necesario.

Además, agregue permisos en la parte superior.

Una configuración importante para agregar, del documento: «Si no usa los colores integrados de Android (@android:color/name) por notification_color meta-data cosa.existe android/app/src/main/res/values/colors.xml (Si el archivo no existe, créelo). «

Para esta aplicación de demostración, creé el archivo dentro android/app/src/main/res/values/colors.xml Y agregue el siguiente contenido a este archivo.

Uf … ¡Esto completa la configuración de nuestra terminal nativa de Android! Ahora es el momento de volver a nuestra aplicación React Native.

Para usar react-native-push-notification, primero crearemos un Notifications Se guardarán la configuración general y las clases de servicio requeridas por la aplicación. No podemos inicializar nuestra notificación dentro del componente, por lo que debe estar fuera del componente y debe estar en el directorio raíz de nuestro proyecto.

Crearé una clase de notificaciones y exportaré su instancia directamente desde el archivo. De esta forma, funcionará como singleton. Siempre que importamos la clase Notification en cualquier componente, se inicializará una vez y se utilizará en toda la aplicación.

Ahora echemos un vistazo a nuestra clase de notificación.

Varias subdivisiones de las categorías anteriores

  • Necesitamos llamar a configure primero para inicializar nuestra PushNotification. Tenga en cuenta que para esta demostración, realmente no necesitamos nuestras funciones onRegister y onNotification.Pero necesitamos crear un canal, no funcionará sin las notificaciones del canal.
  • A continuación, vemos la función llamada scheduleNotification Lo usaremos desde nuestro componente principal de la aplicación. Cuando el usuario establece la fecha, también podemos notar que recibe un objeto de fecha. scheduleNotification Las notificaciones push locales se programarán para nosotros en la fecha y hora de las opciones que le pasamos. También necesitamos mencionar channelD para que funcione. Es posible una mayor personalización. Solo estamos configurando el título y el mensaje por ahora.

¡eso es todo! Ahora solo necesitamos usar esta clase en nuestro componente principal de la aplicación. Podemos hacer esto cuando el usuario presiona el botón SET NOTIFICATION.

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba