React Native использует JavaScript и React для создания приложений для iOS, Android и Интернета из единой кодовой базы. Это также позволяет вам использовать встроенные функции каждого устройства, такие как темы устройства по умолчанию, камера, геолокация и push-уведомления. Это означает, что вы можете использовать React Native для создания полноценного мобильного приложения, которое интегрируется с базовыми настройками iOS или Android, что упрощает реализацию push-уведомлений, как я продемонстрирую сегодня.

В этой статье мы узнаем, как создать простое приложение чата React, которое интегрируется с Firebase Cloud Messaging и push-уведомлениями устройства, чтобы уведомлять пользователя о получении им нового сообщения.

Предпосылки
Чтобы следовать этому руководству, необходимо иметь следующее:

Node v14 или выше и npm v5.6 или выше, установленные на вашем локальном компьютере
Навыки работы с React Native
Аккаунт Firebase

Настройка приложения чата React Native
Чтобы настроить приложение, создайте папку проекта, в которой вы хотите разместить свой проект, а затем инициализируйте приложение с помощью этой команды npx:

npx react-native init chat_app_with_fcm
Войти в полноэкранный режим

Выйти из полноэкранного режима

После выполнения вышеуказанной команды будет создан каталог chat_app_with_fcm, в котором размещены ваши настройки React Native. Измените путь к только что созданной папке chat_app_with_fcm:

cd chat_app_with_fcm
Войти в полноэкранный режим

Выйти из полноэкранного режима

Давайте проверим, работает ли загрузочный шаблон React Native. Убедитесь, что у вас есть подключенное устройство или эмулятор, а затем запустите приложение как таковое:

npm run android
Войти в полноэкранный режим

Выйти из полноэкранного режима

Это запустит среду разработки, которую вы можете использовать для доступа к приложению на подключенном устройстве или эмуляторе.

Создание функционала чата
Это руководство создает приложение чата. Для обработки функциональности чата мы будем использовать пакет react-native-gifted-chat. Пакет предоставит готовый к использованию интерактивный пользовательский интерфейс для приложения чата.

Чтобы установить пакет, откройте терминал проекта и выполните следующую команду:

npm i react-native-gifted-chat
Войти в полноэкранный режим

Выйти из полноэкранного режима

После установки перейдите к файлу App.js и внесите следующие изменения.

Сначала импортируйте модуль GiftedChat:

import { GiftedChat } from 'react-native-gifted-chat'
Войти в полноэкранный режим

Выйти из полноэкранного режима

Затем импортируйте следующие хуки:

import { useState, useCallback, useEffect } from "react";
Войти в полноэкранный режим

Выйти из полноэкранного режима

Внутри функции App:() определите состояние для сообщений:

const [messages, setMessages] = useState([]);
Войти в полноэкранный режим

Выйти из полноэкранного режима

Определите useEffect для установки сообщения по умолчанию при загрузке приложения:

useEffect(() => {
    setMessages([
        {
            _id: 1,
            text: 'Hello there',
            createdAt: new Date(),
            user: {
                _id: 2,
                name: 'PartyA',
                avatar: 'https://placeimg.com/140/140/any',
            },
        },
    ]);
}, [])
Войти в полноэкранный режим

Выйти из полноэкранного режима

Наконец, замените отображаемое представление компонентом GiftedChat:

return (
    <GiftedChat
        backgroundColor={isDarkMode ? Colors.black : Colors.white}
        messages={messages}
        onSend={messages => onSend(messages)}
        user={{
            _id: 1,
        }}
    />
)
Войти в полноэкранный режим

Выйти из полноэкранного режима

После внесения вышеуказанных изменений React Native будет использовать свои функции горячей перезагрузки и отразить изменения на вашем экране.
Описание изображения

Настройка приложения на консоли Firebase
Давайте теперь подключим это приложение к Firebase. Чтобы настроить это, войдите в свою учетную запись Firebase и создайте новый проект, используя карточку «Добавить проект». Введите название вашего проекта и нажмите «Продолжить». Не стесняйтесь включать или отключать Google Analytics на следующем шаге, а затем нажмите «Продолжить».

Когда ваш проект будет готов, нажмите «Продолжить» еще раз, чтобы перейти к панели управления проектом. На этой панели создайте приложение для Android, используя значок Android на панели управления вашего проекта.

Под именем пакета Android введите имя пакета из вашего приложения. Вы можете получить это имя пакета в файле /android/app/src/main/AndroidManifest.xml. Наконец, нажмите «Зарегистрировать приложение», загрузите файл google-services.json и поместите его в каталог вашего проекта android/app/.

Настройка Firebase Cloud Messaging в приложении React Native
Чтобы подключить наше приложение React Native к Firebase, нам нужно настроить приложение с учетными данными Firebase.

В android/build.gradle добавьте следующий путь к классам внутри тегов buildscripts/dependencies:

classpath 'com.google.gms:google-services:4.3.10'
Войти в полноэкранный режим

Выйти из полноэкранного режима

В файле /android/app/build.gradle добавьте плагин google-services сразу после применения плагина: «com.android.application»:

apply plugin: 'com.google.gms.google-services'
Войти в полноэкранный режим

Выйти из полноэкранного режима

Затем установите React Native Firebase следующим образом:

npm i --save @react-native-firebase/messaging
Войти в полноэкранный режим

Выйти из полноэкранного режима

Эти настройки готовы. Теперь давайте рассмотрим, как React Native будет использовать FCM для отправки сообщений чата.

Обработка уведомлений о сообщениях переднего плана
Сначала создайте обработчик событий для обработки уведомлений о сообщениях переднего плана. Обработчик получит входящее сообщение, структурирует его, добавит в состояние сообщения и отобразит предупреждение.

Перейдите к файлу App.js и импортируйте React Native Firebase:

import messaging from '@react-native-firebase/messaging';
Войти в полноэкранный режим

Выйти из полноэкранного режима

В разделе App() добавьте хук useEffect(), который будет прослушивать любые изменения в состоянии сообщений:

useEffect(() => {
}, [messages]);
Войти в полноэкранный режим

Выйти из полноэкранного режима

Внутри useEffect() добавьте обработчик событий для прослушивания уведомлений:

// Get the notification message
const subscribe = messaging().onMessage(async remoteMessage => {

    // Get the message body
    let message_body = remoteMessage.notification.body;

    // Get the message title
    let message_title = remoteMessage.notification.title;

    // Get message image
    let avatar = remoteMessage.notification.android.imageUrl;

    // Append the message to the current messages state
    setMessages(messages => GiftedChat.append(messages, {
        _id: Math.round(Math.random() * 1000000),
        text: message_body,
        createdAt: new Date(),
        user: {
            _id: 2,
            name: "PartyB",
            avatar: avatar,
        },
    }));

    // Show an alert to the user
    Alert.alert(message_title, message_body);
});

return subscribe;
Войти в полноэкранный режим

Выйти из полноэкранного режима

Чтобы проверить это, перейдите в консоль Firebase приложения, которое вы создали на предыдущем шаге. На левой боковой панели в разделе «Взаимодействие» нажмите «Обмен сообщениями в облаке». Затем нажмите кнопку Отправить первое сообщение.

На форме, которая продолжается:

Введите любой заголовок (например, «тест») в поле «Текст уведомления».
Введите «Привет!» под изображением уведомления
Вставьте любой адрес изображения, который вы хотите, или используйте этот стакан воды
Нажмите кнопку Далее ниже
Теперь в разделе «Цель» нажмите «Выбрать приложение», а затем выберите свое приложение. Нажмите «Далее» на следующем шаге, а затем «Просмотреть». В появившемся всплывающем окне нажмите «Опубликовать».

Обработка уведомлений о фоновых сообщениях
Уведомления о фоновых сообщениях работают, когда приложение закрыто. Как и в случае с уведомлениями переднего плана, мы добавим обработчик.

Чтобы добавить обработчик, внесите следующие изменения в App.js перед App():

// Register background handler
// Get the notification
messaging().setBackgroundMessageHandler(async remoteMessage => {
    // Extract the body
    let message_body = remoteMessage.notification.body;
    // Extract the title
    let message_title = remoteMessage.notification.title;
    // Extract the notification image 
    let avatar = remoteMessage.notification.android.imageUrl;

    // Add the notification to the messages array
    setMessages(messages => GiftedChat.append(messages, {
        _id: Math.round(Math.random() * 1000000),
        text: message_body,
        createdAt: new Date(),
        user: {
            _id: 2,
            name: "PartyB",
            avatar: avatar,
        },
    }));

    // Send a notification alert
    Alert.alert(message_title, message_body);
});
Войти в полноэкранный режим

Выйти из полноэкранного режима

Чтобы протестировать функциональность, вам придется закрыть приложение, а затем отправить уведомление из консоли, как в предыдущем разделе.

Вы должны получить такое оповещение, как показано ниже, на панели push-уведомлений вашего телефона.

Описание изображения
Вывод
Уведомления имеют решающее значение для современных мобильных приложений. Я надеюсь, что это руководство помогло вам освоить важный навык добавления push-уведомлений в приложения React Native. Как мы видели, Firebase Cloud Messaging и React Native Firebase делают этот процесс плавным и очень простым.