Перейти к основному содержимому

Первая программа на Expo

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Разработчику Архитектору

Первая программа на Expo​

Эта статья рассчитана на быстрый практический результат за 20-40 минут — создать проект, запустить на телефоне, изменить экран и собрать первый рабочий прототип. Для расширения маршрута используйте Expo, React Native и публикацию Android.

Expo - старт React Native без нативной сборки​

Expo — инструменты поверх React Native — CLI, SDK модулей (камера, уведомления), облачная сборка EAS. Обзор экосистемы: Expo. Полный курс RN (Flexbox, списки, навигация, API): Первая программа на React Native.

Установка и проект​

# Node.js LTS обязателен
npx create-expo-app@latest ExpoHello
cd ExpoHello
npx expo start

На телефоне установите Expo Go (App Store / Google Play) и отсканируйте QR.

Структура (шаблон по умолчанию)​

ExpoHello/
  App.js           # или app/_layout.tsx при Expo Router
  app.json         # имя, иконка, slug, bundle id
  package.json
  assets/

app.json (фрагмент):

{
  "expo": {
    "name": "ExpoHello",
    "slug": "expo-hello",
    "version": "1.0.0",
    "orientation": "portrait",
    "platforms": ["ios", "android"]
  }
}

Экран приветствия​

App.js:

Код ITЗагрузка примера кода…

Сохраните файл — Fast Refresh обновит экран на устройстве без полной пересборки.

Expo Go и Development Build​

РежимОписание
Expo GoГотовое приложение-контейнер; ваш JS грузится с dev-сервера. Не все нативные модули доступны.
Development buildСобственный бинарник с нужными native-модулями (eas build --profile development).
Production buildСборка для App Store / Google Play

Когда нужен камера/Bluetooth-модуль вне SDK Expo Go — переходите на prebuild (npx expo prebuild) или EAS dev build.

Полезные команды​

npx expo start          # dev-сервер
npx expo start --tunnel # если телефон не видит LAN
npx expo install expo-camera   # версии, совместимые с SDK
npx expo doctor         # проверка окружения

Публикация​

  1. Аккаунт на expo.dev.
  2. npm install -g eas-cli → eas login → eas build:configure.
  3. eas build --platform android / ios.
  4. eas submit — загрузка в сторы (требуются учётные записи разработчика Apple/Google).

Частые ошибки​

ПроблемаРешение
QR не открываетсяОдна Wi‑Fi сеть; попробуйте --tunnel
Красный экран "Unable to resolve module"npm install, перезапуск expo start -c
Нужен нативный кодDev build, не Expo Go
EAS build failedПроверьте eas.json и аккаунт expo.dev

Что попробовать​

  1. npx expo install expo-camera — фото с экрана (потребует dev build при ограничениях SDK).
  2. eas build --profile preview --platform android — первая APK в облаке.
  3. Сравните с bare React Native, когда упрётесь в Expo Go.

Дальше​

В подборках​

Статья входит в тематические подборки и блок "С чего начать?" на главной. Соседние шаги того же маршрута:

Первые шаги (маршрут подборки) — Первая программа на React Native, Первые шаги с SQL, Первая программа Electron с React, Первые шаги с MongoDB, Первая программа на Axum, Первые шаги с Redis.

Содержание