Улучшение взаимодействия с пользователем - один из важнейших аспектов любого мобильного приложения. Среди других инструментов и возможностей UX здесь вступает в игру анимация.

К счастью, для разработчиков React Native есть рекомендуемый способ создания желаемого пользовательского опыта. Этого можно добиться с помощью Animated API. Для большинства случаев использования Animated API предоставляет лучший способ разрабатывать и создавать плавные анимации.

В этом руководстве вы узнаете, как создать модальный компонент, который можно настроить с помощью Animated API. Ниже приведен окончательный результат, которого мы хотим достичь в демонстрационном приложении React Native.

Оглавление

Предпосылки

Вот полный список плагинов, пакетов и инструментов, которые вам понадобятся, чтобы продолжить:

  • Node.js ›= v8.x.x устанавливается вместе с npm / yarn.
  • watchman, наблюдатель за изменениями файлов для проектов React Native.
  • Expo CLI ›= v2.19.4.

Начиная

Для начала создайте новый проект, используя expo-cli интерфейс со следующим набором команд. Первая команда создаст новый каталог проекта. Убедитесь, что вы находитесь внутри проекта, когда запускаете приложение в среде симулятора или на реальном устройстве.

Мы используем yarn для кикстарта приложения, но вы можете использовать npm, npm scrips или команду инструмента Expo CLI: expo start. Таким образом вы можете убедиться, что проект был успешно создан.

Следующим шагом будет установка различных зависимостей или библиотек, от которых будет зависеть наш небольшой демонстрационный проект. Выполните следующую команду из окна терминала:

После установки этих зависимостей файл package.json будет выглядеть так.

Ищете новые способы повысить удобство использования мобильного приложения? С Fritz AI вы можете научить свои приложения видеть, слышать, чувствовать и думать. Узнайте, как это сделать, и начните создавать с помощью бесплатной учетной записи .

Настройка экранов

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

Вот начальный фрагмент screens/HomeScreen.js:

В приведенном выше фрагменте кода styled-components используется для определения новых элементов пользовательского интерфейса с помощью React Native API. Для получения дополнительной информации о том, как интегрировать styled-components и его преимущества в приложение React Native, перейдите по этой ссылке.

Для CustomModal.js:

Теперь давайте импортируем компонент HomeScreen внутрь App.js. Этот компонент будет точкой входа в наше приложение:

Запустив приложение с yarn start, вы получите следующий результат. В заголовке есть прорыв, который указывает на то, что навигатор стека интегрирован в наше приложение.

Настройка Redux

В этом разделе давайте создадим простой редуктор для библиотеки управления состоянием Redux. Возможно, что redux как библиотека является излишним для целей этого руководства, поэтому, если вы не хотите ее использовать, найдите способ, который работает для вас.

Кроме того, я не буду вдаваться в подробности о том, как вы должны управлять редукторами и действиями прямо сейчас. Тем не менее, сначала создайте редуктор внутри нового файла с именем reducers/index.js с начальным состоянием:

Поскольку зависимости redux и react-redux уже установлены, откройте файл App.js и напишите внутри код для подключения поставщика хранилища для redux для управления глобальным состоянием приложения:

Настройка redux завершена. Перейдем к следующему разделу, где начинается настоящая работа.

У многих из самых интересных мобильных приложений есть секретный ингредиент - машинное обучение. Подпишитесь на информационный бюллетень Fritz AI Newsletter, чтобы узнать, как мобильное машинное обучение может повысить удобство использования вашего приложения.

Создание анимированного пользовательского модального окна

Несмотря на то, что мы создаем этот настраиваемый модальный экран как экран, вы всегда можете использовать его как компонент многократного использования. Откройте файл CustomModel.js и добавьте следующий фрагмент кода:

Вышеупомянутый компонент прост. Он содержит три представления React Native. В Container мы используем свойство CSS position: absolute. z-index позволит модальному окну появляться в верхней части HomeScreen компонента. Header и Body - это подвиды с фиксированным height.

Чтобы увидеть это в действии, откройте HomeScreen.js и импортируйте его:

В симуляторе вы получите следующий результат:

Отлично! Теперь, когда мы видим настраиваемое модальное окно на экране устройства, давайте приступим к применению некоторых анимаций.

Чтобы применить анимацию в этом демонстрационном приложении, мы будем использовать APIAnimated от React Native. Вам не нужно ничего устанавливать; скорее, вы можете просто импортировать API из ядра React Native. Откройте CustomModel.js и измените его. Вам также необходимо определить начальное состояние, как показано во фрагменте ниже.

Это значение начального состояния определяет анимированное значение top для перемещения модального окна вверх и вниз.

Прямо сейчас начальное верхнее значение получает анимированное значение 900. Синтаксис Animated.Value() используется для привязки свойств стиля, таких как те, которые мы используем с AnimatedContainer.

Для выполнения анимации компонент или View должен быть анимирован; таким образом, вы можете использовать Animated.createAnimatedComponent() для преобразования простого View в анимированный.

Затем определите собственный метод с именем toggleModal перед функцией рендеринга. Эта функция будет обрабатывать анимацию для открытия и закрытия модального окна. Пока это выглядит так:

В приведенном выше фрагменте мы используем весеннюю анимацию с использованием метода Animated.spring(). Это используется для настройки анимации на основе аналитических значений для создания простого весеннего модального окна на основе физики.

Чтобы узнать больше об этом методе, взгляните на эту ссылку в официальной документации React Native. toValue передается как второй параметр. Наконец, чтобы запустить анимацию, вам нужно вызвать метод .start().

Чтобы запустить эту анимацию при первом рендеринге компонента CustomModal, мы используем метод жизненного цикла React componentDidMount().

Вы получите следующий результат.

Нам нужно добавить кнопку, чтобы закрыть модальное окно. Давайте добавим стили и вид для кнопки закрытия модального окна. Создайте компонент CloseView с библиотекой styled-components внутри кнопки TouchableOpacity. Кроме того, для значка закрытия мы будем использовать @expo/vector-icons библиотеку.

Чтобы рассчитать высоту устройства экрана, в приведенном выше фрагменте начните с импорта Dimensions API. React Native использует количество точек на дюйм (DPI) для измерения размера (ширины и высоты) экрана устройства.

Dimensions.get("window").height позволяет собирать высоту экрана. Затем мы используем эту переменную screenHeight в трех местах. Во-первых, исходное состояние, которое раньше имело статическое значение 900, теперь может адаптироваться для различных устройств.

Во-вторых, нам нужно закрыть модальное окно внутри метода closeModal(). В функции toggleModal мы устанавливаем пользовательское значение 174, которое оставляет частичный вид HomeScreen в фоновом режиме. Если вы установите это значение на 0, настраиваемый модальный экран будет охватывать весь экран.

При закрытии модального окна для этого значения будет установлена ​​высота экрана по умолчанию. TouchableOpacity, который является оболочкой для кнопки закрытия, вызывает метод closeModal.

Третье место, где будет использоваться переменная screenHeight, - это стиль контейнера представления: Body. Обратите внимание, что box-shadow не работает на устройствах Android. Если вы по-прежнему хотите придать кнопке закрытия тень, используйте свойство elevation в качестве встроенных стилей для CloseView.

На симуляторе вы получите следующий результат:

Интеграция Redux в модальное окно

В этом разделе мы собираемся использовать Redux для управления состоянием открытия и закрытия модального окна. Мы уже определили редукторы и действия для этой цели. Откройте CustomModal.js и импортируйте библиотеку connect Функция порядка высоты react-redux.

После этого создайте две новые функции, которые являются (более или менее) шаблонным кодом при использовании сокращения в любом приложении React или React Native. Эти функции называются: mapStateToProps() и mapDispatchToProps().

Затем давайте объединим бизнес-логику, чтобы запускать анимацию для открытия и закрытия модального окна внутри одной и той же toggleModal функции. В приведенном ниже фрагменте используются операторы if для отслеживания правильного действия, исходящего из глобального состояния:

Также измените значение атрибута onPress в TouchableOpacity на onPress={this.props.closeMenu}. Наконец, метод componentDidMount() будет вызывать toggleModal() только при первоначальном рендеринге, что означает, что он будет вызываться только один раз.

Чтобы решить эту проблему, воспользуемся componentDidUpdate(). Этот метод жизненного цикла срабатывает каждый раз, когда появляется новое состояние или изменение свойств.

Интеграция пользовательского модального окна в домашний экран

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

Откройте HomeScreen.js и подключите его к состоянию redux, как показано ниже:

Нажмите кнопку Open Modal на экране пользовательского интерфейса, и вы получите результаты, аналогичные показанным ниже:

Поздравляем! Вы только что создали собственное анимированное модальное окно и интегрировали его с другого экрана.

Вы можете закончить это руководство прямо здесь, если оно вам подходит. Но если вы хотите продолжить, давайте добавим анимацию на главный экран, чтобы создать приятный интерфейс в следующем разделе.

Анимация домашнего экрана

В компоненте HomeScreen мы собираемся импортировать довольно много API из React Native. Результат, которого мы пытаемся достичь, заключается в следующем. Вам будет легче понять код в этом разделе, если вы сможете увидеть, что мы хотим:

Теперь, когда вы увидели, что нас ждет в магазине, давайте сначала рассмотрим, что мы собираемся импортировать из react-native.

В приведенной выше демонстрации мы меняем цвет строки состояния с темного на светлый при открытии модального окна. Для этого мы будем использовать StatusBar внутри componentDidMount().

Затем мы определяем начальное состояние для управления анимацией с двумя свойствами: scale и opacity.

Затем мы создаем метод toggleModal. Он запускается методом жизненного цикла componentDidUpdate(), как и в компоненте CustomModal.

Чтобы вызвать эффект сжатия HomeScreen в фоновом режиме при открытии модального окна, мы используем Animated.timing(). Этот метод сопоставляет временной диапазон со значением easing. Это значение easing запускает модуль Easing из ядра React Native.

Этот модуль реализует общие визуальные движения, такие как отскок, эластичность, вход (который мы используем) и выход, кубический, грех, назад, легкость, линейный, четырехугольный, внутренний выход и многие другие. Для получения дополнительной информации о смягчении обратитесь к документации здесь.

Метод Animated.timing() имеет значение по умолчанию 500 миллисекунды. Меняем его на 300.

Чтобы создать частичную непрозрачность, когда главный экран превращается в фон, мы снова используем весеннюю анимацию. В зависимости от того, открывается модальное окно или закрывается, стиль StatusBar изменяется путем вызова метода StatusBar.setBarStyle().

Вот полный код файла HomeScreen.js:

В приведенном выше фрагменте обратите внимание на RootView. Мы также преобразовываем старый добрый Container в анимированный вид.

Заключение

На этом мы завершаем наше погружение в создание анимированного настраиваемого модального окна, чтобы обеспечить приятное взаимодействие с пользователем в вашем нативном приложении React. Вы узнали, как использовать анимированную библиотеку и некоторые ее методы, такие как spring и timing, вместе с модулем Easing. С помощью redux для управления состоянием вы создали настраиваемый модальный пользовательский интерфейс.

Чтобы найти полный код, использованный в этом руководстве, посетите этот репозиторий GitHub.



amandeepmittal / rn-animations
Пользовательское модальное окно в RN с анимированным API. Участвуйте в разработке amandeepmittal / rn-animations, создав учетную запись на… github.com



Если вам понравилось читать это руководство, оставьте 👏. Вы всегда можете связаться со мной в Твиттере.

Примечание редактора. Heartbeat - это онлайн-издание и сообщество, созданное авторами и посвященное изучению возникающего пересечения разработки мобильных приложений и машинного обучения. Мы стремимся поддерживать и вдохновлять разработчиков и инженеров из всех слоев общества.

Являясь независимой редакцией, Heartbeat спонсируется и публикуется Fritz AI, платформой машинного обучения, которая помогает разработчикам учить устройства видеть, слышать, ощущать и думать. Мы платим участникам и не продаем рекламу.

Если вы хотите внести свой вклад, переходите к нашему призыву участников. Вы также можете подписаться на наши еженедельные информационные бюллетени (Deep Learning Weekly и » «Информационный бюллетень Fritz AI), присоединяйтесь к нам на » « Slack и следите за Fritz AI в Twitter , чтобы узнавать обо всех последних новостях в области мобильного машинного обучения.