Установка и настройка React Native SDK

Введение

React Native — мощный и популярный фреймворк от Facebook, который позволяет разрабатывать мобильные приложения для iOS и Android с использованием JavaScript и React. Преимущество React Native в том, что вы пишете один код для двух платформ, что значительно экономит время и ресурсы. Чтобы начать работу с React Native, нужно правильно установить и настроить SDK — все инструменты и зависимости, необходимые для сборки и тестирования мобильных приложений.

В этой статье вы узнаете:

• Как подготовить вашу систему (Windows, macOS, Linux) к работе с React Native
• О нюансах установки SDK для Android и iOS
• Какие инструменты обязательны, а какие — опциональны
• Как запустить первый проект и запустить его в эмуляторе

Я подробно опишу процесс установки, разберу частые ошибки и дам практические рекомендации, чтобы процесс прошёл для вас максимально гладко.

Подготовка среды для разработки

Установка Node.js и npm

React Native использует Node.js для сборки и запуска команд. Убедитесь, что у вас установлены последние LTS-версии Node.js и npm (Node Package Manager).

Установка Node.js

• Для Windows и macOS скачайте установщик с официального сайта Node.js.
• На Linux используйте менеджер пакетов, например:

# Установка на Ubuntu
sudo apt update
sudo apt install nodejs npm

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

node --version
npm --version

Эти команды должны вернуть актуальные номера версии.

React Native SDK - это набор инструментов и библиотек, необходимых для разработки React Native приложений. Правильная установка и настройка SDK - это критически важный этап, от которого зависит дальнейшая стабильность и работоспособность вашего проекта. Важно учитывать особенности вашей операционной системы, версии Node.js и других зависимостей. Если вы хотите детально разобраться в процессе установки и настройки React Native SDK и избежать распространенных ошибок, обеспечив беспроблемный старт разработки — приходите на наш большой курс React Native и Expo Router. На курсе 184 уроков и 11 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Установка пакета React Native CLI

React Native предлагает два способа создания проектов:

• Expo CLI (сервис, абстрагирующий часть нативных возможностей)
• React Native CLI (более гибкий, требует настройки нативных инструментов)

Для полной настройки SDK и доступа к нативному коду рекомендуют использовать React Native CLI. Устанавливать его нужно глобально:

npm install -g react-native-cli

Примечание: В новых версиях React Native команда npx react-native init не требует глобальной установки CLI — возможны оба варианта.

Подготовка среды разработки

Для комфортной работы с React Native удобно использовать редакторы с поддержкой JavaScript, JSX и автодополнением. Рекомендую:

• Visual Studio Code (VS Code)
• WebStorm
• Atom

Для VS Code установите плагин React Native Tools, чтобы использовать встроенный отладчик и запуск проектов.

Установка Android SDK

Для запуска и тестирования приложений на Android потребуется Android SDK.

Шаг 1. Установка Android Studio

Скачайте Android Studio с официального сайта и установите. В процессе убедитесь, что выбрали компоненты:

• Android SDK
• Android SDK Platform-tools
• Android SDK Build-tools
• AVD Manager (Android Virtual Device Manager)

Шаг 2. Настройка переменных среды

Вам нужно добавить пути к Android SDK в переменные среды, чтобы React Native мог находить их. Обычно SDK устанавливается в папку пользователя.

Windows

Добавьте путь к SDK (например, C:\Users\<ваш-пользователь>\AppData\Local\Android\Sdk):

• Откройте "Системные переменные" → "Переменные среды"
• Создайте или обновите переменные:
  • ANDROID_HOME: путь к папке Sdk
• Измените переменную Path, добавьте строки:
  • %ANDROID_HOME%\tools
  • %ANDROID_HOME%\platform-tools

macOS и Linux

Добавьте строки в ~/.bashrc, ~/.zshrc или ~/.bash_profile:

export ANDROID_HOME=$HOME/Library/Android/sdk # Для macOS по умолчанию
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

Не забудьте применить изменения:

source ~/.bashrc
# или аналогичный вашей оболочке

Шаг 3. Установка эмулятора Android

Откройте Android Studio → “AVD Manager” → “Create Virtual Device”. Выберите нужное устройство и образ (например, Pixel 4 с Android 12). Следуйте инструкциям мастера.

Запустить эмулятор можно и из командной строки:

# Посмотреть доступные устройства
$ANDROID_HOME/emulator/emulator -list-avds
# Запустить эмулятор
$ANDROID_HOME/emulator/emulator -avd <Имя_вашего_AVD>

Эта команда очень удобна, если вы работаете через терминал.

Установка iOS SDK (только для macOS)

iOS приложения на React Native можно разрабатывать только на Mac, так как Xcode доступен только на этой ОС.

Шаг 1. Установка Xcode

• Откройте App Store, найдите Xcode и установите его.
• После запуска Xcode откройте Preferences → Locations → Command Line Tools и выберите версию Xcode.

Xcode автоматически включает инструменты разработки и эмулятор iOS (Simulator).

Шаг 2. Установка CocoaPods

CocoaPods — менеджер зависимостей, необходимый для сборки iOS-проектов.

sudo gem install cocoapods

Если возникнут проблемы с sudo, проверьте, установлен ли RubyGems (обычно входит в macOS).

Создание и запуск первого проекта

Теперь давайте разберём весь процесс на практике — создадим проект и запустим его на эмуляторе. Я буду использовать npx, чтобы не требовать глобальной установки CLI.

Шаг 1. Создание проекта

npx react-native init AwesomeProject
# AwesomeProject — название вашего приложения

Эта команда создаст структуру папок и скачает все нужные модули.

Шаг 2. Навигация в проект

cd AwesomeProject

Здесь располагаются все файлы будущего приложения.

Шаг 3. Запуск на Android

Убедитесь, что эмулятор Android запущен или реальное устройство подключено.

npx react-native run-android

Вам потребуется разрешение на отладку USB на устройстве, если оно физическое.

Если вы видите ошибку "No connected devices", запустите эмулятор средствами Android Studio или командой из предыдущего раздела.

Шаг 4. Запуск на iOS (только macOS)

npx react-native run-ios

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

npx react-native run-ios --simulator="iPhone 13"

Основные команды для управления проектом

• npm start — запуск Metro-сервера для горячей перезагрузки приложения
• npx react-native run-android — сборка и запуск на Android
• npx react-native run-ios — сборка и запуск на iOS
• npm install [пакет] — установка npm-пакета
• pod install или npx pod-install — установка CocoaPods-зависимостей внутри ios директории

Советы по устранению ошибок при установке и запуске

Частые ошибки при работе с Android SDK

• SDK not found — проверьте переменную среды ANDROID_HOME и правильность путей в Path.
• Emulator not found — установите Android Emulator через Android Studio > SDK Manager > SDK Tools.
• No devices/emulators found — запустите эмулятор или проверьте, что телефон определился командой adb devices.
• INSTALL_FAILED_INSUFFICIENT_STORAGE — проверьте, есть ли место на эмуляторе или устройстве.

Частые ошибки при работе с iOS SDK

• CocoaPods not installed — установите через sudo gem install cocoapods.
• Multiple Xcode installations — убедитесь, что активная версия выбрана в Xcode > Preferences > Locations.
• Error: Could not find simulator — проверьте список симуляторов командой xcrun simctl list.

Расширенная настройка для профессиональной работы

Использование физического устройства для тестирования

Для Android:

• Активируйте "Режим разработчика" и "Отладку по USB" на устройстве.
• Подключите через USB, разрешите подключение.
• Проверьте, что устройство видно через adb devices.

Для iOS:

• Откройте проект в Xcode через ios/AwesomeProject.xcworkspace.
• Подключите iPhone/iPad, выберите его как устройство для сборки.

Интеграция библиотек

Множество популярных функций реализуются сторонними библиотеками — доступ к камере, картам, пуш-уведомлениям и т.д.

npm install @react-native-community/cameraroll
npx pod-install

В документации каждой библиотеки часто указываются дополнительные шаги (в частности — iOS).

Подключение TypeScript

Если вы хотите использовать TypeScript:

npx react-native init tsProject --template react-native-template-typescript

Это создаст структуру проекта с поддержкой TypeScript "из коробки".

Организация структуры проекта

Рекомендуется разделять компоненты (/components, /screens), сервисы (/services), файлы стилей (/styles) для лучшей масштабируемости приложения.

Как работает Metro Bundler

Metro — это сборщик JavaScript, входящий в React Native. Он решает зависимости между модулями, обеспечивает горячую перезагрузку («Hot Reloading») и собирает всё приложение в формат, понятный родным платформам. Обычно Metro запускается командой npm start или автоматически при запуске проекта.

Одна команда для быстрой проверки SDK

Проверьте свою среду командой:

npx react-native doctor

Она покажет, установлены ли все необходимые компоненты и предложит рекомендации по исправлению.

Особенности работы на Windows, macOS и Linux

• Windows: Работает только с Android, запуск iOS невозможен.
• macOS: Полная поддержка iOS и Android.
• Linux: Поддержка Android без ограничений, iOS — только через Expo.

Заключение

Вы рассмотрели весь путь от установки Node.js, React Native CLI и редактора к настройке Android и iOS SDK, эмуляторов, запуску первого проекта и подключению сторонних библиотек. Теперь ваша среда готова к созданию гибридных мобильных приложений с использованием React Native. Многие частые ошибки можно быстро устранить, проверив переменные среды и зависимости. Для расширенной работы используйте эмуляторы, подключайте реальные устройства, интегрируйте нужные npm-пакеты и экспериментируйте с современными возможностями фреймворка. Если появились сложности, не забывайте про команду npx react-native doctor и официальную документацию.

Установка и настройка React Native SDK - это только начало пути. После успешной установки необходимо настроить проект, добавить необходимые зависимости и освоить основные концепции разработки. Курс React Native и Expo Router поможет вам сделать следующие шаги. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир React Native прямо сегодня.

Частозадаваемые технические вопросы по теме статьи и ответы на них

Как обновить версии Android SDK и Build Tools для совместимости с React Native?

Откройте Android Studio → SDK Manager → вкладка "SDK Tools". Обновите "Android SDK Build-Tools" до последней стабильной версии, также выберите нужные версии API в "SDK Platforms". После обновления убедитесь, что путь к SDK корректен в переменных среды.

Не удаётся подключить физическое Android-устройство к компьютеру — не видно в adb devices. Как исправить?

• Проверьте, включён ли "Режим разработчика" и "Отладка по USB" на устройстве.
• Замените USB-кабель на оригинальный или качественный.
• На Windows установите драйвера устройства (например, Samsung, Xiaomi).
• Используйте команду adb kill-server && adb start-server для перезапуска ADB.

Появляется ошибка "Metro Bundler has encountered an error" — что делать?

• Остановите все процессы Metro (Ctrl+C в терминале).
• Удалите папки кэша: node_modules, yarn.lock или package-lock.json.
• Перезапустите сервер: npm install и затем npx react-native start.

Как добавить переменные окружения в систему, если я работаю через PowerShell?

В PowerShell переменные окружения можно установить командой:

$env:ANDROID_HOME="C:\Users\YourUser\AppData\Local\Android\Sdk"
$env:Path+=";C:\Users\YourUser\AppData\Local\Android\Sdk\platform-tools"

Но стоит добавить их в "Свойства системы" → "Переменные среды" для постоянного использования.

Как установить нужную версию Java (JDK) для работы с Android SDK и React Native?

Скачайте соответствующую версию JDK (обычно рекомендуется JDK 11 LTS) с официального сайта AdoptOpenJDK или Oracle.

• На Windows и macOS достаточно стандартного установщика.
• На Linux используйте пакетный менеджер, например: bash sudo apt install openjdk-11-jdk Проверьте установку: bash java -version javac -version И настройте переменную среды (например, JAVA_HOME).