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



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.
npx react-native init NotificationDemo
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.
yarn add react-native-push-notification
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.
<meta-data android:name="google_analytics_adid_collection_enabled" android:value="false" />
<meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_name" android:value="NotifcationDemo"/>
<meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_description" android:value="NotifcationDemo Notifications"/>
<!-- Change the resource name to your App's accent color - or any other color you want -->
<meta-data android:name="com.dieam.reactnativepushnotification.notification_color" android:resource="@android:color/white"/><receiver android:name="com.google.android.gms.gcm.GcmReceiver" android:exported="true" android:permission="com.google.android.c2dm.permission.SEND">
<intent-filter>
<action android:name="com.google.android.c2dm.intent.RECEIVE" />
<category android:name="$applicationId" />
</intent-filter>
</receiver>
<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
<intent-filter>
<action android:name="android.intent.action.BOOT_COMPLETED" />
</intent-filter>
</receiver>
<service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService"/>
<service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerServiceGcm" android:exported="false">
<intent-filter>
<action android:name="com.google.android.c2dm.intent.RECEIVE" />
</intent-filter>
</service>
Además, agregue permisos en la parte superior.
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
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.
<resources>
<color name="white">#FFF</color>
</resources>
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.
Echemos un vistazo a nuestra demostración final, tenga en cuenta que para fines de demostración, programaré la notificación en 5 segundos.
Este es el repositorio de git para esta demostración. Eso es todo hoy, y con suerte, en mi próxima publicación de blog, veremos esto en iOS.