Впровадження повідомлень про поштовх у додатку React Native може істотно підвищити активність користувачів, забезпечуючи своєчасні оновлення та сповіщення. Firebase Cloud Messaging (FCM) пропонує надійний та простий у використанні рішення для управління поштовими повідомленнями по всій платформах. Цей посібник пролягає вам через кроки, щоб реалізувати push-повідомлення в React Native за допомогою Firebase.

Передумови

  • Проект «Реакція наратив» з Expo або React Native CLI
  • Проект Firebase створений в консолі Firebase
  • Основні знання JavaScript та React-нативів
  • В рамках проекту «Вільна база»

Налаштування Firebase

Спочатку створіть проект Firebase і додайте його додаток. Завантажити файли конфігурації:

Для Android

Завантажте файл Google-services.json і розмістіть його в каталозі андроїд/app вашого проекту. Переконайтеся, що додайте Firebase SDK до ваших залежностей проекту.

Для iOS

Завантажте файл GoogleService-Info.plist і додайте його до проекту Xcode. Встановіть Firebase SDK через CocoaPods.

Встановлення залежностей

Встановити необхідні пакети Firebase:

  • Для реативних КЛІ:

  • Для експойнівного робочого процесу:

Використовуйте Expo Firebase SDK або введіть, щоб розблокувати робочий процес для рідних модулів.

Запитання пропусків і отримання Token

У вашому React рідному коді запитайте дозвіл на повідомлення та отримайте пристрій, щоб пробунути:

Приклад:

import messaging from '@react-native-firebase/messaging';

async function requestUserPermission() {
 const authStatus = await messaging().requestPermission();
 const enabled =
 authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
 authStatus === messaging.AuthorizationStatus.PROVISIONAL;

 if (enabled) {
 console.log('Authorization status:', authStatus);
 getFcmToken();
 }
}

async function getFcmToken() {
 const fcmToken = await messaging().getToken();
 if (fcmToken) {
 console.log('FCM Token:', fcmToken);
 // Send token to your server for push notifications
 }
}

requestUserPermission();

Поручання Вхідні повідомлення

Налаштуйте слухачів для обробки повідомлень про наближення та відповіді:

messaging().onMessage(async remoteMessage => {
 console.log('A new FCM message arrived!', remoteMessage);
 // Show local notification or update UI
});

messaging().setBackgroundMessageHandler(async remoteMessage => {
 console.log('Message handled in the background!', remoteMessage);
 // Handle background message
});

Відправлення повідомлень Push

Використовуйте Firebase Cloud Messaging API або Firebase Console для відправки повідомлень. Приклад завантаження:

{
 "to": "",
 "notification": {
 "title": "Hello!",
 "body": "This is a push notification."
 }
}

Надіслати повідомлення через Firebase Cloud Messaging REST API або Firebase Console.

Висновок

Інтеграція сповіщень проштовхувань з Firebase в React Native передбачає встановлення Firebase, отримання дозволів, оновлення пристроїв Tokens, обробки повідомлень. Реалізація Proper може покращити залучення користувачів і зберегти ваш додаток динамічним і інтерактивним.