Первое приложение

Создание первого приложения в React Native — простой процесс, особенно при использовании Expo. Ниже описаны шаги от инициализации проекта до его запуска на устройстве или эмуляторе.

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

Ранее для создания проектов использовалась команда npx create-react-native-app, но сейчас официально рекомендуется использовать Expo CLI через npx create-expo-app. Эта команда создаёт готовый к запуску проект с минимальной конфигурацией.

Чтобы создать проект с поддержкой TypeScript, выполните:

npx create-expo-app MyFirstApp --template typescript

Это создаст папку MyFirstApp с базовой структурой приложения.

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

После создания вы увидите следующие ключевые файлы:

  • App.tsx — главный компонент приложения. Именно он отображается при запуске.
  • package.json — содержит зависимости и скрипты (например, start, android, ios).
  • app.json или app.config.js — конфигурация Expo: название приложения, иконка, ориентация и др.
  • tsconfig.json — настройки TypeScript (если выбран шаблон с TS).
  • Папка node_modules — все установленные зависимости.

Пример содержимого App.tsx:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Моё первое приложение на React Native!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Этот код отобразит центрированный текст на белом фоне.

Запуск приложения

После перехода в папку проекта (cd MyFirstApp) вы можете запустить приложение несколькими способами.

Вариант 1: через Expo Go (рекомендуется для начала)

  1. Запустите сервер разработки: 
    npx expo start
  2. Откроется веб-интерфейс Metro.
  3. Установите приложение Expo Go на смартфон (из App Store или Google Play).
  4. Отсканируйте QR-код из терминала или веб-панели камерой телефона.
  5. Приложение загрузится и будет автоматически обновляться при сохранении файлов.

Вариант 2: через эмулятор (требует Android Studio или Xcode)

Если у вас установлен Android Studio (для Windows/Linux/macOS) или Xcode (только macOS), можно запустить эмулятор напрямую:

npm run android
# или
npm run ios

Эти команды определены в package.json и вызывают expo run:android или expo run:ios. Они соберут нативное приложение и установят его в эмулятор.

Примечание: при первом запуске сборка может занять несколько минут. Последующие запуски будут быстрее благодаря кэшированию.

После успешного запуска вы увидите ваше приложение на экране — это означает, что среда настроена корректно и можно переходить к дальнейшему изучению компонентов и стилей.