Как сделать apk файл expo

Обновлено: 04.07.2024

Что такое React Native?

Если вы знакомы с веб-фреймворком React, для вас не составит труда быстро разобраться с тем, как работает React Native. По сути, React Native адаптирует фишки React под разработку мобильных приложений. Давайте рассмотрим несколько особенностей React Native:

• Декларативность. Делает возможным удобное описание и создание компонентов в виде ЧТО мы хотим, а не КАК мы хотим.
• Компонентность. Возможность создавать отдельные независимые компоненты с инкапсульрованным состоянием
• Кроссплатформенность. Вы пишите один код под Android и iOS

Вывод: что такое React Native? Это фреймворк, позволяющий одновременно создавать мобильные приложения под Android и iOS, используя для этого независимые компоненты, и делать это на понятном человеку языке.

Быстрое создание React Native приложения

1. Установить NodeJs
2. Установить Expo
3. Создать приложение
4. Установить Android Studio и настроить эмулятор
5. Установить Xcode и настроить эмулятор (только если у вас MacOS)
6. Запустить приложения на эмуляторах или прямо на телефоне

Установка NodeJs

Как установить NodeJs вы можете прочитать в моей статье про Angular.

Установка Expo

Для того чтобы установить Expo выполните следующую команду в консоли:

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

Теперь мы можем создать первое мобильное приложение с помощью Expo и React Native! Все что нам нужно это выполнить команду:

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

Выберете пункт blank. С его помощью будет сгенерировано приложение на JavaScript с реализацией одного экрана. Так же возможны другие варианты:

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

Установка Android Studio и настройка эмулятора

Далее установите необходимые платформы во вкладке SDK Platforms. Для старта можно установить самый новый SKD, должна стоять галочка как на картинке:

Android Studio скачает и установит необходимые компоненты.

. Важный шаг если у вас MacOS или Linux

Если вы работаете с MacOS или Linux, то вам необходимо сделать дополнительный шаг (если у вас Windows, то делать этого не нужно). Вам требуется прописать путь до Android SDK в переменную PATH. Этот путь вы можете скопировать из Android Studio из той же вкладки с настройками из предыдущего шага:

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

У вас откроется этот файл в текстовом редакторе nano. Далее скопируйте путь до Android SKD и пропишите его в файл как строку:

export ANDROID_SDK = / Users / myuser / Library / Android / sdk

Если у вас MacOS, то дополнительно нужно добавить в файл .bash_profile еще одну строку:

export PATH = / Users / myuser / Library / Android / sdk / platform - tools : $ PATH

Файл должен выглядеть примерно так:

Сохраните внесенные изменения командой ctrl+o и закройте nano командой ctrl+x.

Настройка эмулятора Android

Нажимаем Next, выбираем уже скаченную версию Android, после жмем Next и Finish. В результате у вас появится созданный эмулятор, который вы можете запустить нажав зеленую кнопку:

Установка Xcode и запуск эмулятора iOS (только для MacOS)

Установить на свой компьютер эмулятор для iOS можно только если вы используете MacOS. Но, если у вас есть IPhone, то вы сможете с помощью Expo так же запустить свое приложения прямо на телефоне. Ниже я расскажу как это сделать. Итак, перейдем в AppStore и скачаем Xcode. После установки достаточно просто открыть его, перейти во вкладку Xcode -> Open Developer Tool -> Simulator. И вауля! Согласитесь, это было проще, чем настроить Android.

Запуск приложения на эмуляторах или прямо на телефоне

Это главный файл, который будет рендерить экран приложения.

Для запуска необходимо в консоли написать команду:

Как только вы ее выполните у вас откроется браузер со специальной локальной страницей expo:

Ура! Нам удалось создать и запустить первое приложение на React Native! О внутреннем устройстве самого React Native и его компонентах я расскажу в следующих статьях, а сейчас давайте запустим наше приложение на собственном телефоне! Как вы можете увидеть из скриншота, в панели expo в левом нижнем углу есть QR-code. Он то и поможет, но прежде необходимо установить специальное приложение Expo Client на свой смартфон (ссылка на iOS ссылка на Android). После установки просто наведите камеру телефона на QR-code и перейдите по ссылке. У вас запустится Expo Client, внутри которого развернется наше новое приложение!

Выводы

когда сборка закончена, моя консоль показывает что-то вроде

затем я открываю exp.host/@myname/myapp на моем устройстве и приложение отображается через Expo client.

но в пункте 4 документов говорится, что

когда это будет сделано, вы увидите url-адрес a .Android игры (Android) или .ipa (iOS) файл-это ваше приложение.

Я немного запутался. Нет, где в процессе я вижу любой ipa или apk файл, созданный в любом месте на моем компьютере. Я что-то упускаю ? Как я на самом деле генерировать файлы ?

вам нужно будет запустить exp build:status , когда процесс строительства будет завершен, вы увидите ссылку для загрузки apk (android) или ipa (ios) файл

убедитесь, что в приложении.в JSON

затем запустите exp build:android или exp ba

run exp build:status вы найдете, что-то вроде этого, Apk размещен на amazon aws

Если вы запустите

вы получите обновление статуса сборки для ios или android. Он покажет одно из этих возможных состояний:

• сборка продолжается.
• произошла ошибка с этой сборкой
• URL файла ipa или apk

URL-адрес будет чем-то вроде:

когда вы нажмете на ссылку, она покажет текущее состояние, генерируемые журналы, кнопку "Загрузить", где вы можете скачать файл ipa или apk (который будет доступен только в том случае, если сборка была успешной) и кнопку "Отмена", чтобы отменить текущую сборку (которая будет доступна только в том случае, если сборка запущена).

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

замените своим именем пользователя expo (включая символ@) и своим именем приложения. Здесь можно просмотреть определенные статусы сборки, такие как завершенные или неудачные, просмотреть журналы сборок и загрузить текущие и предыдущие успешные сборки.

этот URL-адрес также отображается при переходе к текущей сборке под заголовком "журналы сборки":

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.

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

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

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

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

Установка Expo

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

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

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

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

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

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

Это 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 приложений!

Создаем мобильное приложение с помощью JS. Путь React Native

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

В то же время у вас есть в npm куча библиотек, которые могут помочь в решении разных задач (но не всех, об этом чуть позже). Также на GitHub есть много библиотек, реализующих компоненты, функции, UI, роутинг, и не только для вашего приложения. А еще здесь довольно живое комьюнити. Так что все это может значительно облегчить разработку.

Самый легкий путь — юзать Expo

Expo — это фреймворк (фреймворк для фреймворка, прикинь о_0) и платформа, которая во многом облегчает жизнь начинающему разработчику или разработчице на React Native:

1. Дает возможность разрабатывать и тестировать приложение без использования Xcode или Android SDK и их экосистем.
2. Дает стартовый кит с готовым приложением и парой экранов. Здесь вы можете поковыряться и закрасить пробел в резюме.
3. Имеет обширную и понятную документацию (на английском).
4. Дает очень удобную систему тестирования своего кода и UI-приложения без необходимости создавать установочный файл. Можно даже открывать свое приложение по ссылке.
5. Предоставляет огромное количество уже готовых инструментов и АПИ для работы с модулями устройств (акселерометр, камера, файловая система, уведомления и т. д). Полный список можно посмотреть здесь.
6. Предоставляет свои сервера и окружение для сборки приложения и компиляции его в нативный исполняемый файл.
7. Автоматически менеджерит ваши сертификаты и подписи Play Market и Apple Store.

1. Не поддерживает много нативных библиотек (написанных на Objective-C, Swift, Kotlin и т. д.).
2. Жестко привязан к определенной версии React Native.
3. Ваше приложение будет иметь относительно большой размер.
4. Если захотите отсоединить свое приложение от Expo (например, чтобы использовать парочку нативных модулей), то готовьтесь просидеть над этой задачей не один час.

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

Прежде чем начать

Необходимо иметь предустановленное ПО:

• последнюю стабильную версию Node.js (скачать);
• систему контроля версий Git (скачать).

Далее устанавливаем интерфейс командной строки для Expo.

Если вы счастливый обладатель компьютера от Apple, то лучше установить в придачу watchman. Хотите тестировать свое приложение на физическом девайсе — установите на него приложение Expo: iOS или Android. Также можно использовать в качестве тестовой платформы эмуляторы. С их установкой разбирайтесь сами: iOS (для эмулятора iOS понадобится macOS) и Android.

«Ну давайте уже кодить!» — скажет нетерпеливый читатель, и будет прав

Напишем небольшое приложение наподобие Pinterest. В нем будет разбивка по категориям, галереи, картинки и API-коллы.

Запускаем команду expo cli для создания пустого проекта.

Далее необходимо ввести некоторые параметры для начальной настройки проекта:

При выборе шаблона начального приложения выбираем blank template. Если вы знакомы с TS, то можете применять шаблон на TypeScript. Но мы же тут собрались не для того, чтобы что-то типизировать!

Пишем название проекта и его текстовый идентификатор. Если у вас установлен Yarn, то Expo предложит использовать его вместо npm. В этой статье я буду приводить все примеры на базе npm, чтобы сделать «технологичный зоопарк» статьи минималистичным.

Дальше Expo создаст папку с проектом под тем названием, которые вы указали в slug, и сам установит необходимые зависимости. Если вы все сделали правильно, то при запуске команды npm run start у вас в консоли отобразится информация о том, что приложение сбилдилось, и появится QR-код для открытия его в приложении Expo. В браузере откроется соответствующая страница, в которой также будет консоль live reload и UI для запуска эмуляторов.

Если хотите запустить приложение сразу на эмуляторе, то можно воспользоваться командами npm run ios и npm run android соответственно.

Полный список команд можно просмотреть в ./package.json и здесь.

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

Экраны

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

В нашем приложении будет 2 экрана:

1. Главный со списком всех категорий картинок.
2. Галерея картинок соответствующей категории.

Создаем папку Screens. В нее будем класть файлы с компонентами экранов.

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

Первым будет заглавный экран CategoriesList .

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

Свойство collection — это ссылка на JSON-файл с набором картинок с сайта. Позже мы будем к нему обращаться по API и выводить эти прекрасные картинки.

Как видите, главное отличие от React’а, на первый взгляд, заключается в тегах jsx. Здесь мы не используем теги HTML (из которых в большинстве случаев состоят наши реактовские компоненты). Вместо них применяем нативные компоненты, предоставленные библиотекой React Native, которые компилируются в нативные представления платформ.

Несколько слов о готовых компонентах, которые мы использовали в основе UI.

<ScrollView /> — контейнер для отображения контента, который, возможно, необходимо скроллить.

<List /> и <ListItem /> — список и элемент списка соответственно из библиотеки Native Base. Они уже имеют стилизацию в соответствии с iOS- и Android-гайдами.

Думаю, название тега <Text /> говорит само за себя.

Список категорий

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

Если вы не выключали команду npm run, то уже можете лицезреть результат на экране эмулятора. Выключали? Тогда запустите еще раз: npm run ios или npm run android .

Если вы установили на свой девайс Expo client и хотите открыть приложение в нем, просто отсканируйте QR-код из терминала. На экране вы должны увидеть это:

У вас все так и выглядит? Я вас поздравляю! А если нет, то просто сравните свой код с тем, который написан в статье.

Делаем сетку картинок

У Pinterest очень интересная сетка с картинками. Ее аналог в простонародье известен под названием Masonry. Добрые люди уже запилили его в виде npm-пакета. Но пока мы с ним заморачиваться не будем, лучше погрузимся в работу и стилизацию нативных компонентов и компонентов NativeBase.

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

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

Стилизация

Из react-native мы здесь импортируем StyleSheet . Это класс, который обеспечивает доступ к абстракции стилизации (как CSS). С помощью метода Create создаем объект, содержащий ссылки на конкретные наборы стилей. Имена ссылок соответствуют названиям свойств объекта. Сами же стили присваиваем компоненту с помощью пропса style . Также мы можем передавать в style просто объект.

Как видите, названия свойств стилизации очень похожи на те, которые используем в CSS. Если вы работаете с вебом, то для вас все будет знакомым.

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

Также вы наверняка обратили внимание на компоненты Card и CardItem . Это компоненты из библиотеки NativeBase , которые мы берем для того, чтобы не заморачиваться со стилизацией и позиционированием элементов картинок. Также в этих компонентах можно размещать множество разных наборов контента: текст, заголовки, кнопки, фоновые изображения и т. д. За подробностями идите в доку. В CardItem мы передаем параметр button= , что позволит карточке вести себя как кнопка.

Картинки

Теперь необходимо отдельно упомянуть компонент Image. Он стилизуется так же, как и остальные компоненты, имеет обязательный параметр source, с помощью которого указываем путь картинки, которую хотим вывести. Есть два способа это сделать:

1. В source прокидывать require ( ‘image/path.jpg’ ) для локальных картинок. Однако если вы попытаетесь динамически генерировать строку внутри require, у вас ничего не получится: RN будет в этом месте ломаться.
2. Указывать объект типа . В этом случае вы указываете URL удаленной картинки, которую ваше приложение должно будет подгрузить. Также в uri можно передавать строку формата base64 , однако если у вас там большая строка, то на этапе компиляции сервер Expo может просто отказаться компилировать ваше приложение, сославшись на слишком большой размер js-файла.

В RN нельзя указывать и 100-процентную высоту картинки, нужно передать конкретное значение. Если картинка находится на удаленном сервере, можете воспользоваться нативным методом getSize, который сделает предзагрузку файла изображения.

Навигация

Для реализации навигации между экранами воспользуемся пакетом react-navigation .

npm install react-navigation

Так как наш проект базируется на Expo, требуется установить дополнительные зависимости, чтобы навигация смогла завестись.

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

Вторым параметром он принимает объект со значениями для настройки навигации. Пока мы воспользуемся им для указания экрана по умолчанию с помощью свойства initialRouteName .

Вообще единственным обязательным значением для элемента коллекции является свойство screen.

В нашем приложении будет всего два экрана: общий список и экран для вывода контента выбранной коллекции.

Роут MainList будет вызывать компонент CategoriesList , а с помощью navigationOptions мы укажем заголовок для экрана. Роут ImagesGrid будет, в свою очередь, вызывать компонент экрана GridScreen .

Если вы решите ознакомиться со всеми возможностями навигатора, прочтите документацию.

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

Внедряем навигацию в компоненты.

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

Когда мы в файле navigation.js передали в качестве аргумента экран CategoriesList , то создали вокруг него HOC (компонент высшего порядка), который в пропсы этого компонента передал некоторые данные и методы для реализации навигации. Нас интересует в первую очередь метод navigation.navigate() . Как вы уже поняли по его названию, он осуществляет навигацию между разными экранами; какой именно экран нужно использовать, определяем в первом аргументе. Название экрана совпадает с названиями объектов в коллекции, которую мы передавали в createStackNavigator (navigation.js); вторым параметром можем передать объект с дополнительными данными, которые будут передаваться в createStackNavigator и на следующий открытый экран. Сейчас с помощью второго аргумента мы передаем идентификатор коллекции (collection) и заголовок экрана (title).

А теперь давайте создадим экран просмотра коллекции, в котором будет реализована логика навигации и загрузки изображений.

Дисклеймер. Я знаю, что с точки зрения современного модного молодежного фронтенда, в котором в основном используется redux и какая-нибудь saga для манипуляций с состоянием приложения, обращения к АПИ находятся в коде подальше от представлений. Поэтому если вы вдруг решили создавать серьезное приложение, то лучше отнестись к его архитектуре максимально серьезно (насколько вообще можно говорить о серьезности в контексте приложения на JS :). Прочитайте об однонаправленном потоке данных, Flux, Redux и прочем.

Немного выше в экране CategoriesList мы передавли через метод navigate параметр collection. Теперь в этом экране мы достаем его из props. Collection является урлом для получения массива в json. Его мы будем парсить, получать картинки и выводить их на экран.

Метод componentDidMount у нас асинхронный. В нем мы будем подгружать json с информацией и ссылками на картинки, обрабатывать его и уже на основе данных в нем выводить контент. Тут для людей, которые работают с реактом, ничего нового нет, но на всякий случай поясню. Когда только открывается экран и мы еще не запросили данные по API, у нашего приложения состояние загрузки state.isLoading = true . В этом случае компонент выводит спинер загрузки (он же нативный компонент ActivityIndicator ). Когда же загрузка заканчивается, мы обновляем state распарсенным массивом картинок и свойством isLoaded = false , компонент перерисовывается, но на этот раз у него уже есть массив, который можно передать в компонент ImageGrid , чтобы он отрисовал нам картинки. Обратите внимание на стили loader и loaderContainer — да, в RN есть всеми нами любимый flex. Такая комбинация стилизаций дает возможность отображать объекты строго посередине экрана.

Если вы все сделали правильно, то после запуска npm run ios или npm run android в эмуляторе вы должны увидеть что-то похожее на это:

Метод componentDidMount у нас асинхронный. В нем мы будем подгружать json с информацией и ссылками на картинки.

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

На этом абзаце, скорее всего, 50% читателей закрыли статью и пошли дописывать резюме (еще 40% сделали это наверняка раньше), но мне еще есть что вам сказать.

Дебагинг

Наверняка вы заметили, что в консоли приложение показывает различный вывод. Мы можем пользоваться привычным console.log() для вывода там значений переменных.

Помимо этого, Expo предоставляет мощную (как сын маминой подруги) утилиту для дебагинга в тестовом режиме. На mac в эмуляторе нужно нажать сочетание клавиш Command + D. Откроется окно, в котором нужно нажать Toggle Element Inspector .

Перейдем в режим дебага, который функционально похож на инспектор в Chrome: там можно просмотреть структуру компонентов и примененные к ним стили, подсветить touchable-элементы и т. д.

Используйте нижнюю панель для переключения между режимами инспектора. Чтобы закрыть его, нажмите сочетание клавиш Command + D и снова — Toggle Element Inspector .

Компиляция в установочный файл

Затронем тему компиляции в установочный файл и подготовку к релизу на платформы App Store и Google Play. Для начала нужно будет подготовить конфигурационный файл app.json. В нем надо указать данные для релиза: ID бандла, ссылку на иконку приложения, версию и прочее. После этого нужно будет лишь запустить команду Expo для билда expo build:android или expo build:ios , в процессе он запросит у вас необходимую для компиляции информацию. В случае с приложениями для iOS Expo предлагает заменеджерить сертификаты и электронные подписи, которые используются в процессе дистрибуции, что довольно удобно (думаю, не надо бояться, что разработчики Expo украдут ваши креды (лично я побаивался!)).

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

Ура, это все!

Ты дочитал до конца, а значит ты — молодец. Поэтому вот тебе ссылка на GitHub с проектом, который мы рожали всю эту статью.

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

Читайте также:

  
• Как зарядить планшет prestigio
  
• Apogee groove usb обзор
  
• Что стало с вордом
  
• Не за кэш за идею
  
• Samsung scx 4824fn сброс счетчика тонера