Инструкция по настройке окружения для React Native (Android) на Windows

Введение / Краткое описание

Для кого эта инструкция:

Это пошаговое руководство предназначено для разработчиков, которые хотят настроить своё рабочее окружение на ОС Windows для запуска, сборки и разработки мобильного приложения на React Native для платформы Android.

Что вам понадобится:

Компьютер с ОС Windows 10/11.
Права администратора для установки программ.
Учётная запись GitHub с доступом к репозиторию проекта.
Примерно 15-20 ГБ свободного места на диске (для SDK, эмулятора и зависимостей).
Как минимум иметь 8GB RAM, желательно 16GB+
Обязательно: включённая виртуализация (Intel VT-x / AMD-V в BIOS) и активный Hyper-V / WSL2 в Windows (для работы эмулятора).

Цель:

После выполнения всех шагов вы сможете запустить эмулятор Android со сборкой текущей версии приложения и приступить к разработке новых функций.

1. Node.js

Скачать: https://nodejs.org/en → установить LTS (например, 22.18.0).

Во время установки рекомендуется снять галочки с опций автоматической установки дополнительного инструментария.

Проверка в PowerShell / CMD:
node -v
npm -v

Проверка в powerShell команд node и npm

2. Git

Скачать: https://git-scm.com → установить.

После установки ОБЯЗАТЕЛЬНО настроить пользователя (выполнить в терминале):

git config --global user.name "Ваше Имя" (любое имя)
git config --global user.email "ваша_почта@example.com"
(почта на которую вы зарегистрировали github, так же надо что б почта на github была подтверждена)

Проверка:
git --version
git config --global --list

Проверка в powerShell команд git --version и git config --global --list

3. Java Development Kit (JDK)

Скачать: https://adoptium.net → установить Temurin 21 (рекомендуется для RN 0.76+).

Проверка:
java -version
javac -version

Проверка в powerShell команд java и javac

Важно: После установки убедись, что переменные окружения настроены правильно.

4. Android Studio

Скачать: https://developer.android.com/studio → установить.
При установке ✅ Android Studio, ✅ Android Virtual Device.

После установки:

Первоначальная автоматическая настройка:

Запусти Android Studio. При первом запуске откроется мастер настройки (Setup Wizard).
Выбери режим Standard (Стандартный) и заверши процесс (если будет выбор, а так просто выполнить установку по умолчанию).
Мастер автоматически скачает и установит компоненты самой последней версии (например, API 36). Это нормально.
Дождись полного завершения загрузки и установки. Студия откроется на стартовом экране.

Удаление стандартного эмулятора (если он создан):

На стартовом экране Android Studio нажми More Actions (в центре экрана под New Project, Open, Clone Repository) → Virtual Device Manager.
Если в списке есть любой эмулятор (например, "Medium Phone") — нажми на значок ⋮ (три точки) напротив него и выбери Delete. Подтверди удаление.

Создание правильного эмулятора для проекта:

В окне Device Manager нажми кнопку Create device (или +).
Выбери устройство: В категории Phone выбери Pixel 6a
ВАЖНО: В колонке Play должен быть иконка Google play, если нету то выбери любой другой смартфон у которого есть иконка Google Play → Нажми Next.
(Google Play нужен для работы биометрии на смартфоне, без Google Play биометрия не будет работать)
API надо выбрать UpsideDownCake, API Level: 34 (но можно выбрать любой другой, но лучше 34 так как он надежнее и проще по нагрузке).
КРИТИЧЕСКИ ВАЖНО: Services обязательно должен быть Google Play (а не "Google APIs" или "Android Open Source").
Заверши настройку: Дайте эмулятору любое имя (например, Pixel_6a_API_34), оставьте остальные настройки по умолчанию → Нажми Finish.

Визуализация как создать Новый эмулятор в Android Studio

4. Настройка переменных окружения (❗КРИТИЧЕСКИ ВАЖНО)

"Переменные среды"

Открой окно "Переменные среды":
Нажми на клавиатуре Win + R.
В появившемся окне "Выполнить" введи sysdm.cpl.
Нажми Enter. Откроется окно "Свойства системы".
Перейди во вкладку "Дополнительно".
Внизу окна нажми кнопку "Переменные среды...".

Создай переменную ANDROID_HOME:

В открывшемся окне в разделе "Системные переменные" нажми кнопку "Создать...".
В поле "Имя переменной:" введи ANDROID_HOME.
В поле "Значение переменной:" введи путь к SDK:
C:\Users\<ТВОЕ_ИМЯ_ПОЛЬЗОВАТЕЛЯ>\AppData\Local\Android\Sdk
(Обязательно замени <ТВОЕ_ИМЯ_ПОЛЬЗОВАТЕЛЯ> на имя своей учетной записи Windows!)
Нажми "ОК".

Добавь пути в системную переменную Path:

В том же разделе "Системные переменные" найди переменную Path.
Выдели её и нажми кнопку "Измени...".
В открывшемся окне нажми "Создать" — появится новая пустая строка.
Вставь в неё следующее значение: %ANDROID_HOME%\platform-tools
Снова нажми "Создать" и вставь: %ANDROID_HOME%\emulator
Снова нажми "Создать" и вставь: %ANDROID_HOME%\tools\bin
Важно: Добавляй именно отдельными строками, как на картинке ниже, а не все через точку с запятой.
После добавления всех трёх путей нажми "ОК".

Закрой все окна:

Нажми "ОК" в окне "Переменные среды".
Нажми "ОК" в окне "Свойства системы".

Перезапусти терминал/PowerShell/VS Code! Это обязательный шаг, чтобы изменения вступили в силу.

Визуализация как настроить переменные на Windows

5. VS Code

Скачать: https://code.visualstudio.com → установить как редактор по умолчанию для Git.

Путь: C:\Users\<ТВОЕ_ИМЯ_ПОЛЬЗОВАТЕЛЯ>\AppData\Local\Programs\Microsoft VS Code

Расширения:

React Native Tools
ES7+ React/Redux/React-Native snippets
Prettier – Code formatter
JavaScript (ES6) code snippets

Визуализация как установить Расширения в VS Code

6. React Native — настройка проекта

Склонировать проект с GitHub :

Создай папку в удобном месте, к примеру E:/Project
Открой папку VS Code 'ом, в терминале выполни:
git clone https://github.com/Project/test.git
(Если данная ссылка кому то и принадлежит, то она тут используется исключительно в образовательных целях.)
Это создаст папку E:/Project/test

Переходи в нее
cd test
И затем установить все зависимости проекта (это создаст папку node_modules):
npm install

7. Запуск эмулятора и приложения

Запусти эмулятор Android через AVD Manager в Android Studio. Дождись полной загрузки.
(Рекомендуется) Проверь подключение в терминале:
adb devices

Должен отобразиться твой эмулятор (например, emulator-5554 device).

В терминале VS Code (в папке проекта Project/test) выполни одну команду:
npx react-native run-android

Эта команда автоматически запустит Metro Bundler, соберет и установит приложение на эмулятор.

После успешной установки приложение откроется. Окно с Metro не закрывай.
Внесение изменений: Сохраняй (Ctrl+S) любой файл с кодом → изменения мгновенно появятся в приложении (Hot Reload).

8. DevTools (опционально)

В Metro терминале можно нажать на 3 кнопки r j d, каждая из них сделает свое действие, а именно:

r → Можно просто нажимать в консоли r для hot-reload (быстрая пересборка/можно использовать вместо того чтоб полностью закрывать приложение на эмуляторе)
j → откроется React Native DevTools в Chrome.
d → Откроет меню разработчика (пока лучше туда не лезть)

Окно Metro Bundler не закрываем. Если нужно ввести другие команды — открой новый терминал в VS Code.

Визуализация как открыть второе окно терминала в VS Code

9. Работа с Git и процесс обновлений

После того как ты внес изменения в код (добавил экран, исправил баг и т.д.), чтобы отправить их в общий репозиторий, нужно следовать нескольким шагам. Никогда не пушим сразу в главную ветку main.

Проверь, на какой ветке ты находишься и обнови main

Эта команда покажет текущую ветку (она будет подсвечена звездочкой)
git branch
Если ты не на main, переключись на нее
git checkout main
Забери самые свежие обновления с GitHub
git pull origin main

Создай новую ветку для своей задачи

Ветку лучше называть понятно, что ты в ней делаешь.
Создай и перейди в новую ветку (замени 'feature/settings-screen' на свое название)
git checkout -b feature/settings-screen

Добавь и сохрани (закоммить) свои изменения

Регулярно сохраняй свою работу.
Добавить все измененные файлы (или можно указать конкретные файлы через пробел)
git add .
(Опционально) Проверка перед коммитом — посмотреть, какие файлы будут закоммичены:
git status
Создать "сохранение" (коммит) с понятным описанием
git commit -m "feat: add new SettingsScreen with user profile"

Отправь (запушь) свою ветку на GitHub

В первый раз нужно отправить ветку и связать ее с GitHub
git push -u origin feature/settings-screen
Все последующие пуши в эту же ветку можно делать просто:
git push

Создай Pull Request (PR) на GitHub

Зайди на страницу репозитория: https://github.com/Project/test.git
GitHub сам предложит тебе создать Pull Request для свежезапушенной ветки.
Или перейди во вкладку "Pull requests" → "New pull request".
Убедись, что base — это main, а compare — это твоя ветка (feature/settings-screen).
Напиши понятное название и описание для своего PR (что ты сделал? что изменилось?).
Создай PR. Теперь твои изменения могут проверить и затем добавить в главную ветку.

После мержа PR (объединения с main)

Когда твой PR будет принят и объединен с main, можно удалить ветку локально и на GitHub, а затем обновить main.
Переключись на main
git checkout main
Забери обновленный main с GitHub
git pull origin main
Удали локальную ветку, которая уже не нужна
git branch -d feature/settings-screen
(Опционально) Удали ветку на GitHub
git push origin --delete feature/settings-screen

Заключение / Что дальше?

Поздравляем! 🎉

Вы успешно настроили все необходимые инструменты и окружение для разработки. Теперь у вас есть:

Установленные и настроенные Node.js, Git, JDK, Android Studio и VS Code.
Созданный и готовый к работе эмулятор Android.
Локальная копия проекта со всеми зависимостями.
Запущенное и работающее приложение на эмуляторе.

Следующие шаги:

Ознакомьтесь с кодом проекта в VS Code.
Внесите небольшое изменение (например, измените текст на главном экране), чтобы убедиться, что Hot Reload работает.
Изучите процесс работы с Git в пункте 9 инструкции, чтобы начать вносить свой вклад в проект.
Если что-то пошло не так — сверьтесь с инструкцией ещё раз, проверьте пути и версии. Самые частые проблемы — невнимательная настройка переменных окружения ANDROID_HOME и PATH.

Сообщество RyukoHQ:

Наш сайт: https://ryukohq.com
Наш Telegram-канал: https://t.me/RyukoHQ

Удачной разработки!