Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. React Native
Code

Упрощаем процесс разработки нативных React приложений с помощью Expo

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Oleg Kiselevich (you can also view the original English article)

Expo - это набор инструментов, которые упрощают создание нативных React приложений. В этом уроке я собираюсь показать вам, как вы можете быстро создавать нативные React приложения, используя Expo.

С Expo разработчики могут создавать React Native приложения, не испытывая при этом проблем с установкой и настройкой зависимостей программного обеспечения таких как Android Studio, Xcode и других инструментов, которые необходимы для разработки и запуска React Native приложений.

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

  • Как использовать средства, предоставляемые Expo. Они включают в себя CLI, SDK и клиентское приложение Expo.
  • Как создавать нативные React приложения с помощью Expo.

Что такое Expo?

Expo - это фреймворк для быстро развивающихся нативных React приложений. Это как Laravel или Symphony для PHP-разработчиков, или Ruby on Rails для Ruby разработчиков. Expo предоставляет слой поверх команд React Native API, чтобы ими было удобнее пользоваться и управлять. Он также предоставляет инструменты, которые упрощают начальное создание и тестирование React Native приложений. И наконец он предоставляет компоненты пользовательского интерфейса и сервисы, которые обычно доступны только при установке сторонних нативных компонентов React. Все они доступны через Expo SDK.

Ограничения Expo

Перед тем, как вы продолжите, важно ознакомиться с некоторыми ограничениями Expo:

  1. Expo приложения не поддерживают фоновое выполнение кода. Это означает, что вы не можете, например, запустить код, который прослушивает изменения местоположения, когда приложение закрыто.
  2. Expo приложения ограничены нативными API, которые поддерживает Expo SDK. Это означает, что если ваше приложение имеет весьма специфические задачи, как например обмен данными с Bluetooth устройством, единственный вариант для реализации такой функциональности - это использование простого React Native, или написание собственного кода с помощью библиотеки ExpoKit.
  3. Expo привязывает вас к использованию его инструментов. Это означает, что вы не можете просто установить и использовать большую часть отличных средств, доступных для разработки React Native, таких как инструменты командной строки, вспомогательные библиотеки и фреймворки пользовательского интерфейса. Но хорошая новость в том, что Expo SDK совместим с простыми приложениями React Native, поэтому вы не будете иметь никаких проблем, если извлечете приложение из Expo.
  4. Автономные исполняемые файлы приложений Expo могут быть построены только при наличии подключения к сети. Expo предоставляет инструменты командной строки под названием Exp. Это позволяет разработчикам запускать процесс сборки проекта на серверах Expo. После завершения сборки будет доступна URL-ссыка для скачивания файла .apk или .ipa.

Даже с учетом этих ограничений важно иметь в виду, что Expo является полностью функциональным фреймворком с огромной поддержкой часто используемых Android и iOS интерфейсов API. Это значит, что он обеспечит вас основным функционалом, который обычно нужен приложениям. Так что для реализации нативного функционала зачастую хватит возможностей Expo.

Обзор приложения

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

Memory game default app screen

И вот как это выглядит, когда все пары открыты:

Game completed

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

Установка Expo

В отличие от обычной разработки React Native, где нужно устанавливать и настраивать Android Studio или Xcode и другие зависимости, с Expo нужно выполнить только несколько шагов, чтобы начать разработку приложений:

  1. Скачать и установить Node.js. Expo зависит от платформы Node.js для инструментов командной строки и управления зависимостями.
  2. Установите клиент Expo на вашем iOS или Android устройстве. Он будет использоваться для предварительного просмотра приложения в процессе разработки.
  3. Установите инструменты командной строки. Это позволит вам создавать новый проект Expo, инициировать процесс сборки проекта и многое другое. Выполните следующую команду для установки:

Создание нового приложения Expo

После того как вы установили все зависимости, можно приступить к созданию нового приложения Expo:

После выполнения этой команды, будет создана новая директория MemoryGame. Переместитесь внутрь этой директории и запустите сервер среды разработки:

Кроме того, можно также использовать Expo XDE. Это позволит вам создавать и запускать приложения Expo через GUI. Вы можете скачать установщик с репозитория Expo на GitHub. В настоящее время поддерживается только Windows и Mac. Так что если вы на Ubuntu или другом Linux, лучше пока использовать командную строку.

После запуска сервера разработки, вы сможете увидеть что-то подобное этому:

Running the dev server

Это QR-код, который указывает на рабочий предварительный просмотр проекта. Откройте приложение Expo на вашем телефоне и воспользуйтесь QR сканером. На данном этапе вы можете просматривать экран по умолчанию. Каждый раз, когда вы будете нажимать Control-S в любом из файлов проекта, предварительный просмотр автоматически будет перезагружен для отражения изменений.

Вы можете найти полный исходный код проекта в репозитории на GitHub. А если вы хотите попробовать приложение, то есть демо. Просто выберите соответствующий QR-код и сканируйте его на вашем телефоне с помощью клиентского приложения Expo.

Пишем код приложения

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

Компонент заголовка

Заголовок используется для отображения названия приложения. Создайте папку components. Внутри нее создайте файл Header.js и добавьте в него следующее:

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

Компонент набранных очков

Далее создадим компонент для отображения набранных очков (components/Score.js):

Опять же, это простой компонент с отображением текста и некоторыми базовыми стилями.

Компонент карты

Компонент карты (components/Card.js) будет отображать карты. Эти карты используют иконки из набора векторных иконок Expo. Одной из фишек Expo, которые доступны сразу после установки является то, что платформа включает в себя иконки из таких наборов как FontAwesome, Entypo и Ionicons.

В коде ниже вы можете увидеть, что мы используем только FontAwesome. В этом наборе есть значок, который мы используем для отображения карты в состоянии по умолчанию: знак вопроса. Как вы увидите позже в основном компоненте приложения, мы будем также использовать значки из Entypo и Ionicons. Ссылка на эти источники иконок будет передана тому компоненту, поэтому нет необходимости указывать их здесь:

Внутри метода render() мы используем только источник и значок, которые передаются как свойства, если карта открыта. По умолчанию он будет только отображать значок вопросительного знака от FontAwesome. Но если карта открыта, он будет использовать источник значка, значок и цвет, которые были переданы в свойствах.

На каждую из карт можно нажать. При нажатии будет выполняться функция clickCard(), которая также передается через свойства. Позже вы увидите, что выполняет эта функция, но пока просто знайте, что она обновляет состояние карты для отображения на ней значка:

Не забудьте добавить стили:

Вспомогательные функции

Мы также будем использовать вспомогательную функцию под названием shuffle(). Она позволит сортировать массив карт в случайном порядке, чтобы их расположение было разным каждый раз, когда происходит сброс игры:

Основной компонент

Основной компонент (App.js) содержит основную логику приложения и объединяет все части вместе. Начните с включения пакетов React и Expo, которые мы будем использовать. В этот раз мы используем все источники иконок из пакета векторных иконок Expo:

Далее включим компоненты и вспомогательные функции, который мы создали ранее:

Внутри конструктора мы сначала создаем массив, который содержит уникальные карты. src - это источник иконки, name - это название иконки (вы можете найти названия на GitHub, если вы хотите использовать другие иконки), и color, естественно, - это цвет значка:

Обратите внимание, что вместо того, чтобы непосредственно указывать src как FontAwesome, Entypo или Ionicons для каждого из объектов, мы используем названия, которые определили в объекте sources. Это потому, что нам нужно будет создать копию массива карт, чтобы у каждой карты была пара. Создание копии с помощью методов массива, таких как slice(), создаст копию массива, но проблема в том, что при изменениях объектов либо в копии, либо в оригинале, оба массива будут меняться.

Это подводит нас к решению ниже, которое заключается в необходимости создать совершенно новый объект, преобразовать массив cards в строку и затем преобразовать эту строку обратно в массив. Мы используем строку, поскольку функции не могут быть преобразованы в строки. Мы затем объединим оба массива, чтобы получить в итоге массив, который содержит все карты, которые нам нужны:

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

Сортируем карты в случайном порядке и установим состояние по умолчанию:

Метод render() отображает заголовок, карты, набранные очки и кнопку сброса текущей игры. Он использует функцию renderRows() для отображения отдельных рядов карт. На экране будет шесть рядов, содержащих по четыре карты:

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

Вот функция getRowContents():

Следующая функция renderCards(). Она принимает массив объектов карт и выводит их через компонент Card. Все, что нам нужно сделать на этом этапе - это передать отдельные свойства каждого объекта карты в качестве параметра props. Мы будем использовать это далее для отображения правильного значка, как вы видели в коде компонента Card. Функция clickCard() также передается как свойство. Этой функции передается ID карты для того, чтобы можно было определять и обновлять отдельную карту:

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

Теперь давайте напишем код для обработки выбранной карты.

Во-первых мы открываем карту и добавляем ее в массив выбранных карт:

После того, как в массиве выбранных карт находятся две карты, мы проверяем, совпадают ли названия значков этих карт. Если это так, то это означает, что пользователь выбрал правильную пару. Если они не совпадают, то выбрана неправильная пара. В таком случае мы закрываем первую карту, которая была выбрана, и затем добавляем небольшую задержку перед закрытием второй карты. (Таким образом, пользователь может видеть значок карты прежде чем она перейдет в закрытое состояние.)

Последнее, что нам нужно сделать в обработчике события click, - это обновить состояние, чтобы отразить изменения в пользовательском интерфейсе:

Соответствующая функция - это обработчик события перезагрузки игры. При нажатии кнопки reset, мы просто восстанавливаем состояние по умолчанию, закрываем все карты и перетасовываем их.

Наконец мы добавим несколько основных стилей, чтобы наше приложение хорошо выглядело.

Тестирование приложения

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

Заключение

Вот и все! В этом уроке вы узнали, как использовать Expo XDE для быстрого создания нативного React приложения. Expo - это действительно хороший способ начать разработку нативных React приложений, потому что эта платформа избавляет от необходимости устанавливать много программного обеспечения, что часто является причиной разочарований, особенно для начинающих. Она также предоставляет инструменты, которые позволяют легко осуществлять предпросмотр приложения прямо в процессе разработки. Если вы хотите узнать больше, ознакомьтесь с материалами на сайте Expo.

Также советуем ознакомиться и с некоторыми нашими другими уроками по разработке нативных React приложений!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.