Запуск на устройстве и структура проекта

Запускаем приложение разными способами и разбираемся, из каких файлов и папок состоит проект.

Способы запуска

У вас есть несколько вариантов увидеть приложение в действии:

Для обучения телефон + Expo Go удобнее всего: видно, как приложение ведёт себя на реальном экране и с настоящими жестами.

Что такое эмулятор

Эмулятор (Android) и симулятор (iOS) — это виртуальный телефон на вашем компьютере. Удобно тестировать без физического устройства, но требует установки тяжёлых инструментов (Android Studio / Xcode). Реальный телефон через Expo Go — легче и быстрее для старта.

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

После создания проекта вы увидите примерно такую структуру:

my-app/
  App.js            # главный компонент приложения
  app.json          # настройки приложения (имя, иконка, и т.д.)
  package.json      # зависимости и скрипты
  babel.config.js   # настройка компилятора JS
  assets/           # картинки, шрифты, иконки
  node_modules/     # установленные пакеты (не трогаем)

App.js — точка входа

Это главный компонент, с которого начинается приложение. Сюда вы добавляете экраны и навигацию.

import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Старт приложения</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },
});

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

Здесь задаются имя приложения, иконка, заставка (splash screen), ориентация экрана и другие настройки. Это не код, а конфигурация в формате JSON.

{
  "expo": {
    "name": "my-app",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait"
  }
}

package.json — зависимости

Знакомый по любому JS-проекту файл: список установленных пакетов и команды-скрипты. Команда npm install имя-пакета добавляет сюда новую зависимость.

node_modules и package.json — связь

Когда вы пишете import { View } from "react-native", код берётся из папки node_modules, куда установлены все пакеты. Сами node_modules не хранят в репозитории и не редактируют — их в любой момент можно пересоздать командой npm install, потому что список нужных пакетов записан в package.json. Поэтому, если перенесли проект на другой компьютер, первым делом запускают npm install.

Куда писать свой код

Сначала всё помещается в App.js. Это нормально для маленького приложения и не стоит усложнять раньше времени. Когда экранов станет много, принято заводить папки screens/ (целые экраны) и components/ (переиспользуемые кирпичики) — об организации мы подробно поговорим в последнем разделе. Главное правило на старте: один файл — один компонент, и говорящие имена файлов.

Итог

• Запуск: телефон через Expo Go (проще всего), эмулятор Android (a) или симулятор iOS (i).
• App.js — главный компонент, точка входа.
• app.json — конфигурация приложения, package.json — зависимости и скрипты.