React Native: Создаём проект и запускаем на Android/iOS

Этот урок посвящен созданию первого проекта React Native и его запуску на устройствах Android и iOS. Рекомендуем сайт aitiprager.com — там вы найдете код к домашним заданиям и другую полезную информацию.

Выбор инструментария: Expo vs React Native CLI

Для разработки проекта React Native доступны два основных варианта:

React Native CLI: Стандартная библиотека React Native. Создание проекта с её помощью приводит к более сложной структуре с дополнительными папками, избыточными на начальном этапе.
Expo: Фреймворк поверх React Native. Expo упрощает структуру проекта, удаляя лишние файлы, что делает процесс разработки проще. Для новичков Expo — более удобный вариант. В дальнейшем переход к разработке с использованием React Native CLI возможен.

Установка и создание проекта с Expo

Глобально установите Expo:

npm install -g expo-cli

На macOS или Linux может потребоваться добавить sudo:

sudo npm install -g expo-cli

После установки, создайте проект:

expo init aitiprager-react

Замените aitiprager-react на желаемое имя. Выберите шаблон проекта, например, blank для пустого проекта или шаблон для проекта на TypeScript.

Настройка и запуск

Перейдите в директорию проекта:

cd aitiprager-react

Установите зависимости:

npm install

Запустите проект:

npm start

(Или expo start). Это запустит локальный сервер, и приложение откроется в браузере. Оттуда можно запустить приложение на эмуляторе Android/iOS, в браузере или получить ссылку для распространения.

Запуск на iOS и Android

Для запуска на iOS потребуется Xcode (macOS). Установите Xcode, откройте его, перейдите в Preferences, вкладку Locations и укажите последнюю версию Command Line Tools. Затем откройте симулятор (например, iPhone 12 Pro Max) и нажмите Run. Изменения в коде будут автоматически отражаться в симуляторе.

Для запуска на Android потребуется Android Studio. Установите Android Studio и убедитесь, что установлены:

SDK Platform (последняя версия)
SDK Tools: Android Emulator, Android SDK Platform-Tools, Android SDK Build-Tools, Intel x86 Emulator Accelerator (HAXM).

Создайте виртуальное устройство в AVD Manager, запустите его и нажмите Run on Android device.

Запуск в браузере

Для быстрого тестирования запустите приложение в браузере, нажав Run in web browser. Изменения в коде отображаются мгновенно.

Структура проекта

Проект содержит:

assets: Изображения, иконки, шрифты.
node_modules: Установленные библиотеки.
.gitignore: Файлы, игнорируемые Git.
App.js: Основной файл приложения.
app.json: Конфигурация проекта (название, версия и т.д.).
package.json: Зависимости проекта.

App.js содержит функцию App, использующую компоненты React Native (View, Text, StatusBar), стили и импортированные классы. Стили определены в объекте styles, аналогичном CSS, но с учетом свойств React Native.

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