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

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

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

Expo — инструменты поверх React Native: CLI, SDK модулей (камера, уведомления), облачная сборка EAS. Обзор экосистемы: Expo. Компоненты RN: Первая программа на 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:

import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';

export default function App() {
  const [clicks, setClicks] = useState(0);

  return (
    <View style={styles.root}>
      <Text style={styles.h1}>Expo Hello</Text>
      <Text>Нажатий: {clicks}</Text>
      <Pressable style={styles.btn} onPress={() => setClicks((n) => n + 1)}>
        <Text style={styles.btnLabel}>Нажми</Text>
      </Pressable>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  h1: { fontSize: 24, marginBottom: 12 },
  btn: { marginTop: 16, paddingHorizontal: 20, paddingVertical: 12, backgroundColor: '#10b981', borderRadius: 8 },
  btnLabel: { color: '#fff' },
});

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

---

Expo Go vs 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

---

Дальше

• React Native — архитектура bridge / Fabric
• JavaScript — React
• Сборка мобильных приложений

---