Swift, Objective-C, Java, Kotlin – вот список языков программирования, которые вам понадобятся, чтобы создать мобильное приложение для Android и iOS. Внушительный список, на освоение которого может уйти много времени. Но мы то с вами хотим быстро – все и сразу: стать хакером за 2 дня, похудеть на 15 кг за одну неделю и прочие безобразия. Что делать? К счастью ребята из Facebook разделяют наше желание быстрого результата, поэтому они придумали фреймворк, который позволяет создавать мобильные приложения для Android и iOS только благодаря одному языку – JavaScript – и имя ему React Native.

Что такое 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 – это специальная библиотека, упрощающая разработку React Native приложений. Это альтернатива стандартному созданию приложения с помощью React Native CLI. Рассмотрение его работы выходит за рамки этой статьи. Главными преимуществами Expo являются готовая реализация многих нативных компонентов самого телефона, что позволяет быстрее создавать новые приложения, а также окружение, позволяющее быстро тестировать работу разрабатываемого приложения на своем смартфоне или эмуляторе.

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

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

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

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

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

• blank (TypeScript) – результат будет тем же, что и с blank, с тем лишь исключением, что вместо JavaScript вы получите проект на TypeScript
• tabs – приложение с несколькими экранами и использованием библиотеки react-navigation для переключения между ними. Работа с навигацией в React Native достойна рассмотрения в отдельной статье.
• minimal и minimal (TypeScript) – по сути будет аналогом создания проекта с помощью React Native CLI с дополнительными библиотеками из Expo

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

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

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

Для того, чтобы тестировать наше приложение во время разработки, нам понадобится установить эмуляторы телефонов на ПК. Для тестирования работы приложения на Android самым простым способом является установка Android Studio. Тут все просто, переходите по ссылке, скачиваете, устанавливаете и запускаете. Дальше вам потребуется установить дополнительные компоненты. Для этого перейдите в раздел настроек и откройте следующие вкладки: Preferences -> Appearance & Behavior -> System Settings -> Android SDK. После вам нужно свериться с картинкой ниже – у вас должны стоять галочки так же как и на картинке:

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

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

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

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

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

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

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

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

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

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

Теперь перейдем к запуску эмулятора Android. Для этого в Android Studio откройте вкладку Tools -> AVD Manager. Далее нажимаем на кнопку “Create Virtual Device” и выбираем нужный девайс

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

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

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

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

Наконец-то мы вплотную подошли к запуску нашего приложения, которое мы сгенерировали с помощью Expo! Для того, чтобы открыть приложение удобно пользоваться не просто текстовым редактором, а некоторой IDE. Предлагаю вам два варианта. Номер раз – это WebStorm от JetBrains, номер два – Visual Studio Code от Microsoft. Лично я рекомендую использовать второй вариант, так как в WebStorm не так мощно работает система подсказок именно для React native (на июль 2020 года). Поэтому демонстрацию запуска я покажу именно с помощью Visual Studio Code. Итак, открываем установленный проект и переходим в файл App.js

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

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

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

Если вы это видите, значит все сделали правильно. Теперь нам нужно запустить ранее подготовленные эмуляторы и только после нажать кнопку “Run on Android” и/или “Run on iOS“. Expo загрузит специальное приложение и с помощью него “развернет” наше приложение на телефоне. Картинка будет вот такая:

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

Выводы

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