Это руководство является четвертой главой нашей реализации клона AirBnB в React Native. В предыдущих главах мы успешно реализовали аутентификацию электронной почты с помощью Firebase. Если вам нужно увязнуть, вот ссылки на части 1–3:
В части 4 мы продолжим с того места, на котором остановились, реализуя функцию уведомления для процесса аутентификации. Таким образом, мы собираемся создать панель предупреждений внизу и изменить цвет фона, отображающего уведомление о проверке Firebase.
Итак, приступим!
Создайте компонент уведомления
Сначала мы собираемся создать простой компонент с именем Notification в файле Notification.js. Здесь нам нужно создать простой класс с именем Notification, который распространяется на компонентный модуль React. На данный момент мы просто собираемся визуализировать текст с помощью компонента Text, заключенного внутри компонента View, как показано во фрагменте кода ниже:
Затем мы собираемся импортировать наш Notification компонент в наш Login компонент в файле Login.js, как показано во фрагменте кода ниже:
import Notification from "../components/Notification";
Затем нам нужно инициализировать или отобразить наш компонент Notification после инициализации кнопки входа в компонент NextArrowButton, как показано во фрагменте кода ниже:
В результате вы получите текст в компоненте Notification, отображаемый внизу экрана, как показано на снимке экрана эмулятора ниже:
Отправить сообщение от родительского к дочернему компоненту
На этом этапе мы собираемся работать с компонентом Notification и отправлять реквизиты из родительского компонента (т. Е. Компонента Login) и получать реквизиты в дочернем компоненте (т. Е. Компоненте Notification). Здесь мы собираемся отправить сообщение об ошибке из компонента Login в компонент Notification в качестве реквизита.
Для этого нам нужно добавить два компонента Text в компонент Notification для title и message, в которых мы получаем данные как свойства от компонента Login. Код для обработки этого показан во фрагменте ниже:
Затем нам нужно отправить данные (т.е. свойства title и message) из родительского компонента (т.е. компонента Login), как показано во фрагменте кода ниже:
В результате мы получаем следующий экран, где title и message из компонента Notification импортируются в компонент Login и отображаются в нижней части экрана:
Стилизация компонента уведомления
Здесь мы собираемся добавить немного стиля нашему Notification компоненту, чтобы он выглядел более привлекательно. Мы собираемся использовать компонент Stylesheet, импортированный из пакета react-native , чтобы определить необходимые стили. Затем нам нужно привязать эти стили к нашему компоненту, который визуализируется, как показано в приведенном ниже фрагменте:
Мы видим, что стили привязаны к компонентам View и Text. А результат добавления стилей показан на скриншоте эмулятора ниже:
Текст ошибки и сообщение на приведенном выше снимке экрана по-прежнему отображаются не на своем месте в нижней части экрана. Поэтому нам нужно добавить больше стиля к контейнеру, чтобы правильно разместить компонент Notification на экране входа в систему.
Для этого мы собираемся обернуть самый внешний View компонент другим View компонентом и связать его со стилем wrapper, как показано в приведенном ниже коде:
В результате мы можем более детально рассмотреть наш компонент Notification в нижней части экрана входа в систему, как показано ниже:
Добавление кнопки закрытия
Затем мы добавим кнопку закрытия, чтобы скрыть уведомление. Для этого воспользуемся набором значков FontAwesome из пакета react-native-vector icons.
Если вы не установили пакет векторных иконок, вы можете просто запустить следующую команду в репозитории своего проекта:
Используя npm:
npm install react-native-vector-icons
Пакет
react-native-vector-iconsпредоставляет настраиваемые значки для React Native с поддержкой NavBar / TabBar / ToolbarAndroid, источника изображения и полного стиля.
Здесь мы собираемся использовать набор FontAwesome значков и обернуть значок вокруг TouchableOpacity, чтобы сделать значок интерактивным.
Во-первых, нам нужно импортировать набор значков FontAwesome из пакета react-native-vector-icons в компонент Icon, используя следующий фрагмент кода:
import Icon from "react-native-vector-icons/FontAwesome";
Затем нам нужно добавить компонент Icon в контейнер уведомлений, обернутый TouchableOpacity, как показано во фрагменте кода ниже:
Здесь мы видим, что компонент Icon со значком с именем times добавлен с опорой color светло-серой. Затем нам нужно добавить стиль к компоненту TouchableOpacity, чтобы он закрепился прямо в компоненте Notification. Мы добавляем стиль closeButton, который представлен во фрагменте кода ниже:
И последнее, но не менее важное: нам нужно добавить пустую функцию с именем closeNotification для обработки события onPress из компонента TouchableOpacity, как показано во фрагменте кода ниже:
Функция состоит из метода alert, который проверяет, правильно ли запускается функция при нажатии кнопки закрытия. Результат добавления кнопки закрытия «x» показан на снимке экрана эмулятора ниже:
Обработка уведомления о закрытии
Здесь нам нужно обработать событие уведомления close от родительского компонента (Login). Поэтому нам нужно создать функцию в компоненте Login, которая запускается, когда мы нажимаем кнопку уведомления close в компоненте Notification.
Во-первых, нам нужно создать в компоненте Login функцию с именем handleCloseNotification, которая запускается, когда мы нажимаем кнопку close в компоненте Notification. Реализация функции представлена ниже:
Затем в компоненте Notification, импортированном в компонент Login, нам нужно установить функцию prop для запуска функции handleCloseNotification:
Теперь в компоненте Notification мы получаем событие handleCloseNotification от родительского компонента с помощью свойств и запускаем функцию внутри функции closeNotification, используя код из следующего фрагмента:
Теперь мы видим, что родительский компонент запускает оповещение. Когда мы нажимаем кнопку close, в компоненте Notification запускается функция closeNotification, которая запускает свойство handleCloseNotification и отправляет сообщение триггера функции handleCloseNotification в компоненте Login. В результате на экране эмулятора мы видим следующий результат:
Скрытие или отображение уведомления
Здесь мы собираемся реализовать скрытие и отображение уведомления об ошибке. Чтобы управлять внешним видом уведомления, мы будем использовать простые реквизиты, которые отправляют state из компонента Login в компонент Notification.
В Login.js т.е. наш Login компонент, нам нужно создать состояние для обработки состояния уведомления. Переменная состояния для обработки состояния уведомления - formValid, как показано во фрагменте ниже:
Затем нам нужно добавить состояние в функцию render, чтобы отправить его в компонент Notification, как показано во фрагменте кода ниже:
В приведенном выше фрагменте кода мы создали новую переменную с именем showNotification, которая устанавливает для нее значение true или false в зависимости от состояния formValid. Затем нам нужно отправить переменную showNotification в качестве опоры в компонент Notification, как показано во фрагменте кода ниже:
Затем нам нужно обработать состояние контейнера Notification, добавив marginBottom, чтобы представление исчезло или скрылось из видимой области, в зависимости от значения состояния, полученного от компонента Login.
Для этого сначала нам нужно получить свойство showNotification от компонента Login, а затем установить значение переменной bottom на 80 или 0, в зависимости от значения свойства showNotification.
Затем нам нужно привязать значение переменной bottom к стилю marginBottom, интегрированному во внешний вид компонента Notification, как показано ниже:
Теперь мы можем скрыть или показать контейнер уведомлений родительского компонента.
Использование кнопки закрытия, чтобы скрыть уведомление
Теперь мы можем управлять кнопкой закрытия вручную. Но для того, чтобы на самом деле использовать кнопку закрытия, нам нужно добавить некоторую функцию для обработки состояния showNotification.
Давайте сначала протестируем работу кнопки закрытия, обновив эмулятор и нажав кнопку закрытия. Мы можем увидеть результат в симуляции эмулятора ниже:
Наконец, мы можем закрыть уведомление.
Собираем все вместе
На данный момент мы реализовали панель уведомлений, которую мы можем отображать или скрывать по своему усмотрению.
Затем нам нужно использовать ответ от элемента управления Firebase вместо жестко запрограммированного сообщения об ошибке. Поэтому, когда мы получаем ошибку от элемента управления Firebase, нам нужно показать это сообщение об ошибке на панели уведомлений внизу. Код для реализации этого показан во фрагменте кода ниже:
Затем нам нужно присвоить состояние error опоре message элемента Notification в компоненте Login, чтобы отправить его в Notification:
А для обработки функции close мы переключаем состояние триггера, чтобы по умолчанию панель уведомлений скрывалась.
Теперь мы можем увидеть результат в симуляции эмулятора ниже:
Как мы видим, уведомление об ошибке работает отлично.
Добавление анимации и изменение цвета фона
Наконец, мы собираемся добавить анимацию, чтобы компонент уведомлений выдвигался и выдвигался. А затем мы собираемся переключить цвет фона экрана входа в систему при срабатывании уведомления.
Изменение цвета фона
Здесь, когда появляется уведомление об ошибке, мы хотим изменить цвет фона на экране входа в систему. Для этого мы используем состояние formValid для переключения между двумя основными цветами, то есть темно-зеленым и темно-оранжевым, и устанавливаем его для основной оболочки, то есть компонента KeyboardAvoidingView в компоненте Login. Код для этого представлен во фрагменте ниже:
Теперь давайте проверим, работает ли это:
Как мы видим, цвет экрана успешно меняется в приведенном выше моделировании. Теперь давайте добавим нашу анимацию.
Анимация: вставлять и выдвигать
Здесь мы хотим добавить слайд-анимацию и выдвигать в контейнер уведомлений.
Во-первых, чтобы реализовать анимацию, нам нужно импортировать компоненты Animate и Easing из пакета react-native в компоненте Notification:
Затем нам нужно инициализировать метод Animate.value переменной positionValue. После этого нам нужно создать функцию с именем animateNotification и инициализировать метод синхронизации анимации Animated.timing, который помогает определять стили анимации. Более подробную информацию о свойствах анимации вы можете найти в официальной документации здесь.
Первый параметр в функции timing - это positionValue, а второй параметр - это параметр конфигурации анимации, показанный в фрагменте кода ниже:
Теперь в компоненте Notification нам нужно заменить нижние значения переменных на инициализированное значение анимации, используя функцию showNotification для переключения между отображением и скрытием.
Затем нам нужно заменить наш обычный компонент View на компонент Animation View. Наконец, нам нужно заменить значение marginBottom на значение Animated.Value, которое мы определили в конструкторе.
А теперь давайте попробуем:
Как мы видим, анимация сдвига и сдвига работает отлично.
На этом мы завершаем наше руководство по реализации функции уведомления об аутентификации в нашем приложении клонирования AirBnB с использованием React Native.
Вывод
В этом руководстве мы узнали, как реализовать панель уведомлений во время аутентификации пользователя.
Мы также узнали, как передавать данные между родительским и дочерним компонентами в React Native. В реализации панели уведомлений мы получили пошаговое руководство по отображению сообщения об ошибке с сервера Firebase. Наконец, мы узнали, как динамически управлять стилями с помощью переменной состояния и как добавлять анимацию.
Весь код этого руководства доступен в этом репозитории GitHub. В следующей главе мы продолжим реализацию нашего приложения-клона AirBnB с экраном регистрации электронной почты Firebase.
Ресурс
Нативный клон AirBnB React от Cubui
Примечание редактора: Heartbeat - это онлайн-публикация и сообщество, созданное авторами и посвященное предоставлению первоклассных образовательных ресурсов для специалистов по науке о данных, машинному обучению и глубокому обучению. Мы стремимся поддерживать и вдохновлять разработчиков и инженеров из всех слоев общества.
Независимая редакция, Heartbeat спонсируется и публикуется Comet, платформой MLOps, которая позволяет специалистам по обработке данных и группам машинного обучения отслеживать, сравнивать, объяснять и оптимизировать свои эксперименты. Мы платим участникам и не продаем рекламу.
Если вы хотите внести свой вклад, отправляйтесь на наш призыв к участникам. Вы также можете подписаться на наши еженедельные информационные бюллетени (Deep Learning Weekly и Comet Newsletter), присоединиться к нам в » «Slack и подписаться на Comet в Twitter и LinkedIn для получения ресурсов, событий и гораздо больше, что поможет вам быстрее и лучше строить модели машинного обучения.
