3. Установка и настройка

Самый быстрый способ начать — Expo. Metro bundler, горячая перезагрузка и тестирование прямо на телефоне через QR-код.

Требования

# Проверь версии
node --version   # >= 18
npm --version    # >= 9

# Установка Expo CLI
npm install -g expo-cli eas-cli

Создание проекта

# Стандартный Expo проект
npx create-expo-app@latest MyApp

# С шаблоном (TypeScript, navigation, etc.)
npx create-expo-app@latest MyApp --template

# Выбери из списка шаблонов:
# ✔ Blank (TypeScript)
# ✔ Navigation (TypeScript)
# ✔ Blank (JavaScript)

Запуск

cd MyApp
npx expo start

# Опции запуска:
npx expo start --android    # Открыть эмулятор Android
npx expo start --ios        # Открыть симулятор iOS (только Mac)
npx expo start --web        # Открыть браузер
npx expo start --tunnel     # Туннель для внешних сетей

Тестирование на устройстве

1. Установи Expo Go из App Store / Google Play
2. Запусти npx expo start
3. Сканируй QR-код камерой (iOS) или Expo Go (Android)
4. Приложение откроется мгновенно!

Terminal → QR Code → Expo Go → Твоё приложение

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

MyApp/
├── app/                      # Expo Router (экраны)
│   ├── (tabs)/               # Tab-группа
│   │   ├── _layout.tsx       # Tab настройки
│   │   ├── index.tsx         # Tab 1: Home
│   │   └── explore.tsx       # Tab 2: Explore
│   ├── _layout.tsx           # Корневой layout
│   └── +not-found.tsx        # 404
├── components/               # Компоненты
│   ├── ui/                   # UI компоненты
│   └── Themed.tsx            # Компоненты с темой
├── constants/
│   └── Colors.ts             # Цветовая схема
├── hooks/
│   ├── useColorScheme.ts
│   └── useThemeColor.ts
├── assets/
│   ├── fonts/                # Кастомные шрифты
│   └── images/               # Картинки
├── app.json                  # Конфигурация Expo
├── babel.config.js
├── expo-env.d.ts
└── tsconfig.json

app.json — конфигурация

{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "myapp",
    "userInterfaceStyle": "automatic",
    "splash": {
      "image": "./assets/images/splash-icon.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourcompany.myapp"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.yourcompany.myapp"
    },
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": ["expo-router"],
    "experiments": {
      "typedRoutes": true
    }
  }
}

Установка эмуляторов

Android (Android Studio)

# 1. Скачай Android Studio: https://developer.android.com/studio
# 2. SDK Manager → установи Android SDK
# 3. AVD Manager → создай виртуальное устройство
# 4. Добавь в ~/.bashrc или ~/.zshrc:
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

# 5. Запусти эмулятор, затем:
npx expo start --android

iOS (только macOS)

# 1. Xcode из App Store
# 2. Xcode → Preferences → Components → установи симулятор
# 3. Запуск:
npx expo start --ios

Metro Bundler

Metro — JavaScript-бандлер для React Native (как webpack, но для мобилок):

JavaScript + TypeScript + JSX
        ↓
   Metro Bundler
        ↓
   JS Bundle (index.bundle)
        ↓
Hermes Engine (JavaScript VM)
        ↓
Нативные компоненты

Hot Reload: Metro отслеживает изменения файлов и перезагружает только изменённые модули. Нажми r в терминале для ручной перезагрузки.

Дополнительные инструменты

# Expo Dev Tools (браузерный интерфейс)
npx expo start  # Открывает браузерный дашборд

# React Native Debugger (отдельное приложение)
# https://github.com/jhen0409/react-native-debugger

# Flipper (Inspector от Meta)
# https://fbflipper.com/

# TypeScript проверка
npx tsc --noEmit

Первый компонент

app/index.tsx

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { useState } from 'react';

export default function HomeScreen() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Привет, React Native!</Text>
      <Text style={styles.counter}>{count}</Text>
      <TouchableOpacity
        style={styles.button}
        onPress={() => setCount(c => c + 1)}
      >
        <Text style={styles.buttonText}>Нажать</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#1e1e2e',
  },
  title: {
    fontSize: 24,
    color: '#cba6f7',
    marginBottom: 20,
  },
  counter: {
    fontSize: 64,
    color: '#89b4fa',
    fontWeight: 'bold',
    marginBottom: 30,
  },
  button: {
    backgroundColor: '#a6e3a1',
    paddingHorizontal: 40,
    paddingVertical: 16,
    borderRadius: 12,
  },
  buttonText: {
    color: '#1e1e2e',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

Итоги

• Expo — самый быстрый способ начать (2 команды)
• Expo Go позволяет тестировать на реальном устройстве без сборки
• Metro Bundler + Hot Reload = быстрый цикл разработки
• Для Android нужен Android Studio, для iOS — Mac + Xcode
• app.json — центральный конфиг приложения

// React Web-эквивалент React Native кода
// Базовый компонент — старт React Native разработки
import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{
      minHeight: '100vh', display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      background: '#1e1e2e', color: 'white', fontFamily: 'system-ui',
    }}>
      <h2 style={{ color: '#cba6f7' }}>Привет, React Native!</h2>
      <span style={{ fontSize: 64, fontWeight: 'bold', color: '#89b4fa' }}>
        {count}
      </span>
      <button onClick={() => setCount(c => c + 1)} style={{
        marginTop: 24, padding: '14px 36px', fontSize: 18,
        fontWeight: 'bold', border: 'none', borderRadius: 12,
        background: '#a6e3a1', color: '#1e1e2e', cursor: 'pointer',
      }}>
        Нажать
      </button>
    </div>
  );
}