Перейти к содержанию

Настройка среды разработки

Эта страница поможет вам установить и создать ваше первое приложение React Native.

Если вы новичок в мобильной разработке, проще всего начать с Expo Go. Expo — это набор инструментов и сервисов, построенных вокруг React Native, и, хотя у него много возможностей, наиболее актуальной для нас сейчас является то, что с его помощью вы можете написать приложение React Native за несколько минут. Вам понадобится только последняя версия Node.js и телефон или эмулятор. Если вы хотите попробовать React Native прямо в браузере, не устанавливая никаких инструментов, вы можете попробовать Snack.

Если вы уже знакомы с мобильной разработкой, вы можете использовать React Native CLI. Для начала работы с ним требуется Xcode или Android Studio. Если у вас уже установлен один из этих инструментов, вы сможете приступить к работе в течение нескольких минут. Если они не установлены, вам придется потратить около часа на их установку и настройку.

Выполните следующую команду, чтобы создать новый проект React Native под названием "AwesomeProject":

1
2
3
4
npx create-expo-app AwesomeProject

cd AwesomeProject
npx expo start

1
2
3
4
yarn create expo-app AwesomeProject

cd AwesomeProject
yarn expo start

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

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

Установите приложение Expo Go на свой телефон iOS или Android и подключитесь к той же беспроводной сети, что и ваш компьютер. На Android используйте приложение Expo Go для сканирования QR-кода с терминала, чтобы открыть свой проект. На iOS используйте встроенный сканер QR-кодов в стандартном приложении iOS Camera.

Модификация вашего приложения

Теперь, когда вы успешно запустили приложение, давайте изменим его. Откройте файл App.js в выбранном вами текстовом редакторе и отредактируйте несколько строк. Приложение должно автоматически перезагрузиться после того, как вы сохраните изменения.

Вот и все!

Поздравляем! Вы успешно запустили и изменили свое первое приложение React Native.

Поздравляем

Что теперь?

У Expo также есть документация, на которую вы можете ссылаться, если у вас есть вопросы по работе с инструментом. Вы также можете обратиться за помощью в Expo Discord.

Если у вас возникла проблема с Expo, прежде чем создавать новый вопрос, пожалуйста, посмотрите, нет ли уже существующих вопросов по этому поводу в разделе Вопросы Expo.

Запуск приложения на симуляторе или виртуальном устройстве

Expo Go позволяет вам запустить ваше приложение React Native на физическом устройстве без установки нативных SDK для iOS и Android. Если вы хотите запустить свое приложение на симуляторе iOS или виртуальном устройстве Android, обратитесь к инструкции "React Native CLI Quickstart", чтобы узнать, как установить Xcode или настроить среду разработки Android.

После того, как вы все настроите, вы сможете запустить свое приложение на виртуальном устройстве Android, выполнив команду npm run android, или на симуляторе iOS, выполнив команду npm run ios (только для macOS).

Ограничения

Приложение Expo Go является отличным инструментом для начала работы — оно существует для того, чтобы помочь разработчикам быстро запустить проекты, экспериментировать с идеями (как, например, на Snack) и делиться своей работой с минимальными трудностями. Expo Go делает это возможным благодаря богатой возможностями нативной среде исполнения, состоящей из каждого модуля в Expo SDK, поэтому для использования модуля достаточно установить пакет с помощью npx expo install и перезагрузить свое приложение.

Компромисс заключается в том, что приложение Expo Go не позволяет вам добавлять собственный нативный код — вы можете использовать только нативные модули, встроенные в Expo SDK. Существует множество отличных библиотек, доступных за пределами Expo SDK, и вы даже можете захотеть создать свою собственную нативную библиотеку. Вы можете использовать эти библиотеки с помощью development builds, или используя "prebuild" для генерации нативных проектов, или и то, и другое. Подробнее о добавлении нативного кода в проекты, созданные с помощью create-expo-app.

create-expo-app настраивает ваш проект на использование самой последней версии React Native, которая поддерживается Expo SDK. Приложение Expo Go обычно получает поддержку данной версии React Native с новыми версиями SDK (выходят ежеквартально). Вы можете проверить этот документ, чтобы узнать, какие версии поддерживаются.

Если вы интегрируете React Native в существующий проект, вы можете использовать Expo SDK и сборки для разработки, но вам нужно будет настроить родную среду разработки. Выберите "React Native CLI Quickstart" выше для получения инструкций по настройке родной среды сборки для React Native.

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

Инструкции немного отличаются в зависимости от вашей операционной системы разработки, а также от того, хотите ли вы начать разработку для iOS или Android. Если вы хотите разрабатывать как для Android, так и для iOS, это не страшно — вы можете выбрать одну из них для начала, поскольку настройка немного отличается.

ОС разработки

Целевая ОС

Установка зависимостей

Вам понадобятся Node, Watchman, интерфейс командной строки React Native, JDK и Android Studio.

Хотя вы можете использовать любой редактор по своему выбору для разработки приложения, вам потребуется установить Android Studio, чтобы настроить необходимые инструменты для создания приложения React Native для Android.

Node и Watchman

Мы рекомендуем установить Node и Watchman с помощью Homebrew. После установки Homebrew выполните следующие команды в терминале:

1
2
brew install node
brew install watchman

Если вы уже установили Node на свою систему, убедитесь, что это Node 16 или новее.

Watchman — это инструмент от Facebook для наблюдения за изменениями в файловой системе. Настоятельно рекомендуется установить его для повышения производительности.

Java Development Kit

Мы рекомендуем установить дистрибутив OpenJDK под названием Azul Zulu с помощью Homebrew. После установки Homebrew выполните следующие команды в терминале:

1
2
3
4
5
brew tap homebrew/cask-versions
brew install --cask zulu11

# Get path to where cask was installed to double-click installer
brew info --cask zulu11

После установки JDK обновите переменную окружения JAVA_HOME. Если вы использовали описанные выше шаги, JDK, скорее всего, будет находиться по адресу /Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home.

Дистрибутив Zulu OpenJDK предлагает JDK для как Intel, так и M1 Macs. Это гарантирует, что ваши сборки будут быстрее на M1 Mac по сравнению с использованием JDK на базе Intel.

Если вы уже установили JDK в своей системе, мы рекомендуем JDK 11. Вы можете столкнуться с проблемами при использовании более высоких версий JDK.

Среда разработки для Android

Настройка среды разработки может быть несколько утомительной, если вы новичок в разработке Android. Если же вы уже знакомы с разработкой Android, вам может понадобиться настроить несколько вещей. В любом случае, пожалуйста, внимательно выполните следующие несколько шагов.

1. Установите Android Studio

Скачайте и установите Android Studio. Находясь в мастере установки Android Studio, убедитесь, что отмечены галочками все следующие пункты:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device.

Затем нажмите "Далее", чтобы установить все эти компоненты.

Если флажки отмечены серым цветом, у вас будет возможность установить эти компоненты позже.

После завершения установки и появления экрана приветствия перейдите к следующему шагу.

2. Установите Android SDK

Android Studio по умолчанию устанавливает последнюю версию Android SDK. Однако для создания приложения React Native с нативным кодом требуется, в частности, SDK Android 13 (Tiramisu). Дополнительные Android SDK могут быть установлены через SDK Manager в Android Studio.

Для этого откройте Android Studio, нажмите на кнопку "More Actions" и выберите "SDK Manager".

Android Studio Welcome

Менеджер SDK также можно найти в диалоге "Preferences" Android Studio в разделе Appearance & Behavior → System Settings → Android SDK.

Выберите вкладку "SDK Platforms" в SDK Manager, затем установите флажок рядом с "Show Package Details" в правом нижнем углу. Найдите и разверните запись Android 13 (Tiramisu), затем убедитесь, что следующие пункты отмечены:

  • Android SDK Platform 33
  • Intel x86 Atom_64 System Image или Google APIs Intel x86 Atom System Image или (для Apple M1 Silicon) Google APIs ARM 64 v8a System Image.

Затем выберите вкладку "SDK Tools" и установите флажок напротив "Show Package Details". Найдите и разверните запись "Android SDK Build-Tools", затем убедитесь, что выбрана 33.0.0.

Наконец, нажмите "Применить", чтобы загрузить и установить Android SDK и связанные с ним инструменты сборки.

3. Настройка переменной окружения ANDROID_HOME

Инструменты React Native требуют настройки некоторых переменных окружения для создания приложений с нативным кодом.

Добавьте следующие строки в ваш конфигурационный файл ~/.zprofile или ~/.zshrc (если вы используете bash, то ~/.bash_profile или ~/.bashrc):

1
2
3
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

Запустите source ~/.zprofile (или source ~/.bash_profile для bash), чтобы загрузить конфигурацию в текущую оболочку. Убедитесь, что ANDROID_HOME был установлен, выполнив echo $ANDROID_HOME, а соответствующие каталоги были добавлены в ваш путь, выполнив echo $PATH.

Пожалуйста, убедитесь, что вы используете правильный путь к Android SDK. Вы можете найти фактическое расположение SDK в диалоге "Preferences" Android Studio, в разделе Appearance & Behavior → System Settings → Android SDK.

Интерфейс командной строки React Native

React Native имеет встроенный интерфейс командной строки. Вместо того, чтобы устанавливать и управлять определенной версией CLI глобально, мы рекомендуем вам получить доступ к текущей версии во время выполнения с помощью npx, который поставляется вместе с Node.js. С помощью npx react-native <command>, текущая стабильная версия CLI будет загружена и выполнена в момент выполнения команды.

Создание нового приложения

Если вы ранее установили глобальный пакет react-native-cli, пожалуйста, удалите его, так как он может вызвать непредвиденные проблемы:

1
npm uninstall -g react-native-cli @react-native-community/cli

React Native имеет встроенный интерфейс командной строки, который вы можете использовать для создания нового проекта. Вы можете получить доступ к нему, не устанавливая ничего глобально, используя npx, который поставляется вместе с Node.js. Давайте создадим новый проект React Native под названием "AwesomeProject":

1
npx react-native@latest init AwesomeProject

Это не обязательно, если вы интегрируете React Native в существующее приложение, если вы "катапультировались" из Expo, или если вы добавляете поддержку Android в существующий проект React Native (см. Integration with Existing Apps). Вы также можете использовать сторонний CLI для инициализации вашего приложения React Native, например Ignite CLI.

[Опционально] Использование определенной версии или шаблона

Если вы хотите начать новый проект с определенной версией React Native, вы можете использовать аргумент --version:

1
npx [email protected] init AwesomeProject --version X.XX.X

Вы также можете начать проект с пользовательским шаблоном React Native с помощью аргумента --template.

Подготовка устройства Android

Для запуска приложения React Native Android вам понадобится устройство Android. Это может быть либо физическое устройство Android, либо виртуальное устройство Android, которое позволяет эмулировать устройство Android на вашем компьютере.

В любом случае, вам нужно будет подготовить устройство к запуску Android-приложений для разработки.

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

Если у вас есть физическое устройство Android, вы можете использовать его для разработки вместо AVD, подключив его к компьютеру с помощью USB-кабеля и следуя инструкциям здесь.

Использование виртуального устройства

Если вы используете Android Studio для открытия ./AwesomeProject/android, вы можете увидеть список доступных виртуальных устройств Android (AVD), открыв "AVD Manager" из Android Studio. Найдите значок, который выглядит следующим образом:

Android Studio AVD Manager

Если вы недавно установили Android Studio, вам, скорее всего, потребуется создать новое AVD. Выберите "Create Virtual Device...", затем выберите любой Phone из списка и нажмите "Next", затем выберите образ Tiramisu API Level 33.

Нажмите "Далее", затем "Готово", чтобы создать AVD. На данном этапе вы должны иметь возможность нажать на зеленую кнопку с треугольником рядом с вашим AVD, чтобы запустить его, а затем перейти к следующему шагу.

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

Шаг 1: Запуск Metro

Сначала вам нужно будет запустить Metro, JavaScript bundler, который поставляется вместе с React Native. Metro "принимает входной файл и различные опции, и возвращает один файл JavaScript, который включает весь ваш код и его зависимости."-Metro Docs

Чтобы запустить Metro, запустите команду npx react-native start в папке проекта React Native:

1
npx react-native start

react-native start запускает Metro Bundler.

Если вы используете менеджер пакетов Yarn, вы можете использовать yarn вместо npx при запуске команд React Native внутри существующего проекта.

Если вы знакомы с веб-разработкой, Metro очень похож на webpack для приложений React Native. В отличие от Kotlin или Java, JavaScript не компилируется, как и React Native. Пакетирование — это не то же самое, что компиляция, но оно может помочь улучшить производительность запуска и перевести некоторые специфические для платформы JavaScript в более широко поддерживаемые JavaScript.

Шаг 2: Запуск приложения

Пусть Metro Bundler запускается в своем собственном терминале. Откройте новый терминал в папке проекта React Native. Выполните следующие действия:

1
npx react-native run-android

Если все настроено правильно, вскоре вы увидите, что ваше новое приложение запущено в эмуляторе Android.

AwesomeProject на Android

npx react-native run-android — это один из способов запустить ваше приложение — вы также можете запустить его прямо из Android Studio.

Если вы не можете заставить его работать, обратитесь к странице Устранение неполадок.

Модификация вашего приложения

Теперь, когда вы успешно запустили приложение, давайте изменим его.

  • Откройте файл App.tsx в выбранном вами текстовом редакторе и отредактируйте несколько строк.
  • Нажмите дважды клавишу R или выберите Reload в меню Dev (⌘M), чтобы увидеть ваши изменения!

Вот и все!

Поздравляем! Вы успешно запустили и модифицировали свое первое приложение React Native.

Поздравляем

Что теперь?

  • Если вы хотите добавить этот новый код React Native в существующее приложение, ознакомьтесь с руководством Integration guide.

Если вам интересно узнать больше о React Native, ознакомьтесь с Introduction to React Native.

Установка зависимостей

Вам понадобятся Node, Watchman, интерфейс командной строки React Native, Xcode и CocoaPods.

Хотя вы можете использовать любой редактор по своему выбору для разработки приложения, вам потребуется установить Xcode, чтобы настроить необходимые инструменты для создания приложения React Native для iOS.

Node и Watchman

Мы рекомендуем установить Node и Watchman с помощью Homebrew. После установки Homebrew выполните следующие команды в терминале:

1
2
brew install node
brew install watchman

Если вы уже установили Node на свою систему, убедитесь, что это Node 16 или новее.

Watchman — это инструмент от Facebook для наблюдения за изменениями в файловой системе. Настоятельно рекомендуется установить его для лучшей производительности.

Xcode

Самый простой способ установить Xcode — через Mac App Store. Установив Xcode, вы также установите симулятор iOS и все необходимые инструменты для создания приложения для iOS.

Если вы уже установили Xcode на свою систему, убедитесь, что это версия 10 или новее.

Инструменты командной строки

Вам также потребуется установить инструменты командной строки Xcode. Откройте Xcode, затем выберите Настройки... (или Preferences...) в меню Xcode. Перейдите на панель Locations и установите инструменты, выбрав последнюю версию в выпадающем списке Command Line Tools.

Xcode Command Line Tools

Установка симулятора iOS в Xcode

Чтобы установить симулятор, откройте Xcode > Settings... (или Preferences...) и выберите вкладку Platforms (или Components). Выберите симулятор с соответствующей версией iOS, которую вы хотите использовать.

CocoaPods

CocoaPods — одна из систем управления зависимостями, доступных для iOS. CocoaPods — это Ruby gem. Вы можете установить CocoaPods, используя версию Ruby, которая поставляется с последней версией macOS.

Для получения дополнительной информации посетите CocoaPods Getting Started guide.

Интерфейс командной строки React Native

React Native имеет встроенный интерфейс командной строки. Вместо того, чтобы устанавливать и управлять определенной версией CLI глобально, мы рекомендуем вам получать доступ к текущей версии во время выполнения с помощью npx, который поставляется вместе с Node.js. С помощью npx react-native <команда>, текущая стабильная версия CLI будет загружена и выполнена в момент выполнения команды.

Создание нового приложения

Если вы ранее установили глобальный пакет react-native-cli, пожалуйста, удалите его, так как он может вызвать непредвиденные проблемы:

1
npm uninstall -g react-native-cli @react-native-community/cli

Вы можете использовать встроенный интерфейс командной строки React Native для создания нового проекта. Давайте создадим новый проект React Native под названием "AwesomeProject":

1
npx react-native@latest init AwesomeProject

Это не обязательно, если вы интегрируете React Native в существующее приложение, если вы "катапультировались" из Expo, или если вы добавляете поддержку iOS в существующий проект React Native (см. Integration with Existing Apps). Вы также можете использовать сторонний CLI для инициализации приложения React Native, например Ignite CLI.

Если у вас возникли проблемы с iOS, попробуйте переустановить зависимости, выполнив:

  1. cd ios, чтобы перейти в папку ios.
  2. bundle install для установки Bundler.
  3. bundle exec pod install для установки зависимостей iOS, управляемых CocoaPods.

[Опционально] Использование определенной версии или шаблона

Если вы хотите начать новый проект с определенной версией React Native, вы можете использовать аргумент --version:

1
npx [email protected] init AwesomeProject --version X.XX.X

Вы также можете запустить проект с пользовательским шаблоном React Native с помощью аргумента --template.

Примечание

Если приведенная выше команда не работает, возможно, на вашем компьютере глобально установлена старая версия react-native или react-native-cli. Попробуйте деинсталлировать cli и запустить cli с помощью npx.

[Опционально] Настройка вашего окружения

Начиная с версии React Native 0.69, можно настроить окружение Xcode с помощью файла .xcode.env, предоставляемого шаблоном.

Файл .xcode.env содержит переменную окружения для экспорта пути к исполняемому файлу node в переменной NODE_BINARY. Это предложенный подход для отделения инфраструктуры сборки от системной версии node. Вы должны настроить эту переменную на свой собственный путь или свой собственный менеджер версий node, если он отличается от установленного по умолчанию.

Кроме того, можно добавить любую другую переменную окружения и использовать файл .xcode.env в фазах вашего сценария сборки. Если вам нужно запустить скрипт, требующий определенного окружения, то это предлагаемый подход: он позволяет отделить фазы сборки от определенного окружения.

Если вы уже используете NVM (команда, которая помогает устанавливать и переключаться между версиями Node.js) и zsh, вы можете перенести код инициализации NVM из вашего ~/.zshrc в файл ~/.zshenv, чтобы помочь Xcode найти ваш исполняемый файл Node:

1
2
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Вы также можете убедиться, что все "фазы сборки сценариев оболочки" вашего проекта Xcode используют /bin/zsh в качестве оболочки.

Запуск вашего приложения React Native

Шаг 1: Запуск Metro

Сначала вам нужно запустить Metro, JavaScript bundler, который поставляется вместе с React Native. Metro "принимает входной файл и различные опции, и возвращает один файл JavaScript, который включает весь ваш код и его зависимости." — Metro Docs

Чтобы запустить Metro, запустите npx react-native start в папке проекта React Native:

1
npx react-native start

react-native start запускает Metro Bundler.

Если вы используете менеджер пакетов Yarn, вы можете использовать yarn вместо npx при запуске команд React Native внутри существующего проекта.

Если вы знакомы с веб-разработкой, Metro очень похож на webpack для приложений React Native. В отличие от Swift или Objective-C, JavaScript не компилируется, как и React Native. Пакетирование — это не то же самое, что компиляция, но оно может помочь улучшить производительность при запуске и преобразовать некоторые специфические для платформы JavaScript в более широко поддерживаемые JavaScript.

Шаг 2: Запустите свое приложение

Пусть Metro Bundler запускается в собственном терминале. Откройте новый терминал в папке проекта React Native. Выполните следующие действия:

1
npx react-native run-ios

Вскоре вы увидите, что ваше новое приложение запущено в симуляторе iOS.

AwesomeProject on iOS

npx react-native run-ios — это один из способов запустить ваше приложение. Вы также можете запустить его непосредственно из Xcode.

Если вы не можете заставить это работать, см. страницу Устранение неполадок.

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

Приведенная выше команда по умолчанию автоматически запустит ваше приложение на симуляторе iOS. Если вы хотите запустить приложение на реальном физическом устройстве iOS, следуйте инструкциям здесь.

Модификация приложения

Теперь, когда вы успешно запустили приложение, давайте изменим его.

  • Откройте файл App.tsx в выбранном вами текстовом редакторе и отредактируйте несколько строк.
  • Нажмите ⌘R в симуляторе iOS, чтобы перезагрузить приложение и увидеть свои изменения!

Вот и все!

Поздравляем! Вы успешно запустили и изменили свое первое приложение React Native.

Поздравляем

Что теперь?

  • Если вы хотите добавить этот новый код React Native в существующее приложение, ознакомьтесь с руководством Integration guide.

Если вам интересно узнать больше о React Native, ознакомьтесь с Introduction to React Native.

Целевая ОС

Установка зависимостей

Вам понадобится Node, интерфейс командной строки React Native, JDK и Android Studio.

Хотя вы можете использовать любой редактор по вашему выбору для разработки приложения, вам потребуется установить Android Studio, чтобы настроить необходимые инструменты для создания приложения React Native для Android.

Node, JDK

Мы рекомендуем установить Node через Chocolatey, популярный менеджер пакетов для Windows.

Рекомендуется использовать LTS версию Node. Если вы хотите иметь возможность переключаться между различными версиями, вам лучше установить Node через nvm-windows, менеджер версий Node для Windows.

Для React Native также требуется Java SE Development Kit (JDK), который также можно установить с помощью Chocolatey.

Откройте командную строку администратора (щелкните правой кнопкой мыши Command Prompt и выберите "Запуск от имени администратора"), затем выполните следующую команду:

1
choco install -y nodejs-lts microsoft-openjdk11

Если вы уже установили Node на свою систему, убедитесь, что это Node 16 или новее. Если в вашей системе уже установлен JDK, мы рекомендуем JDK11. Вы можете столкнуться с проблемами при использовании более высоких версий JDK.

Вы можете найти дополнительные варианты установки на странице загрузок Node.

Если вы используете последнюю версию Java Development Kit, вам нужно изменить версию Gradle для вашего проекта, чтобы он мог распознать JDK. Вы можете сделать это, перейдя в {корневая папка проекта}\android\gradle\wrapper\gradle-wrapper.properties и изменив значение distributionUrl для обновления версии Gradle. Вы можете посмотреть здесь последние выпуски Gradle.

Среда разработки для Android

Настройка среды разработки может быть несколько утомительной, если вы новичок в разработке Android. Если же вы уже знакомы с разработкой Android, вам может понадобиться настроить несколько вещей. В любом случае, пожалуйста, внимательно выполните следующие несколько шагов.

1. Установите Android Studio

Скачайте и установите Android Studio. Находясь в мастере установки Android Studio, убедитесь, что отмечены галочками все следующие пункты:

  • Android SDK
  • Android SDK Platform
  • Виртуальное устройство Android.
  • Если вы еще не используете Hyper-V: Производительность (Intel ® HAXM) (См. здесь для AMD или Hyper-V).

Затем нажмите "Далее", чтобы установить все эти компоненты.

Если флажки отмечены серым цветом, у вас будет возможность установить эти компоненты позже.

После завершения установки и появления экрана приветствия перейдите к следующему шагу.

2. Установите Android SDK

Android Studio по умолчанию устанавливает последнюю версию Android SDK. Однако для создания приложения React Native с нативным кодом требуется, в частности, SDK Android 13 (Tiramisu). Дополнительные Android SDK могут быть установлены через SDK Manager в Android Studio.

Для этого откройте Android Studio, нажмите на кнопку "More Actions" и выберите "SDK Manager".

Android Studio Welcome

Менеджер SDK также можно найти в диалоге "Preferences" Android Studio в разделе Appearance & Behavior → System Settings → Android SDK.

Выберите вкладку "SDK Platforms" в SDK Manager, затем установите флажок напротив "Show Package Details" в правом нижнем углу. Найдите и разверните запись Android 13 (Tiramisu), затем убедитесь, что следующие пункты отмечены:

  • Android SDK Platform 33
  • Intel x86 Atom_64 System Image или Google APIs Intel x86 Atom System Image.

Затем выберите вкладку "SDK Tools" и установите флажок напротив "Show Package Details". Найдите и разверните запись Android SDK Build-Tools, затем убедитесь, что выбрана версия 33.0.0.

Наконец, нажмите "Применить", чтобы загрузить и установить Android SDK и связанные с ним инструменты сборки.

3. Настройте переменную окружения ANDROID_HOME

Инструменты React Native требуют настройки некоторых переменных окружения для создания приложений с нативным кодом.

  1. Откройте Панель управления Windows..
  2. Нажмите на Учетные записи пользователей, затем снова нажмите Учетные записи пользователей.
  3. Нажмите на Изменить переменные окружения.
  4. Нажмите на New..., чтобы создать новую пользовательскую переменную ANDROID_HOME, которая указывает на путь к вашему Android SDK:

ANDROID_HOME Environment Variable

SDK по умолчанию установлен в следующем месте:

1
%LOCALAPPDATA%\Android\Sdk

Фактическое расположение SDK можно найти в диалоговом окне "Настройки" Android Studio в разделе Внешний вид и поведение → Настройки системы → Android SDK.

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

  1. Откройте powershell
  2. Скопируйте и вставьте Get-ChildItem -Path Env: в powershell.
  3. Убедитесь, что ANDROID_HOME был добавлен

4. Добавьте platform-tools в Path

  1. Откройте Панель управления Windows..
  2. Нажмите на Учетные записи пользователей, затем снова нажмите Учетные записи пользователей.
  3. Нажмите на Изменить переменные окружения.
  4. Выберите переменную Путь.
  5. Нажмите Редактировать..
  6. Нажмите New и добавьте в список путь к platform-tools.

По умолчанию эта папка расположена следующим образом:

1
%LOCALAPPDATA%\Android\Sdk\platform-tools

Интерфейс командной строки React Native

React Native имеет встроенный интерфейс командной строки. Вместо того, чтобы устанавливать и управлять определенной версией CLI глобально, мы рекомендуем вам получить доступ к текущей версии во время выполнения с помощью npx, который поставляется вместе с Node.js. С помощью npx react-native <команда>, текущая стабильная версия CLI будет загружена и выполнена в момент выполнения команды.

Создание нового приложения

Если вы ранее установили глобальный пакет react-native-cli, пожалуйста, удалите его, так как он может вызвать непредвиденные проблемы:

1
npm uninstall -g react-native-cli @react-native-community/cli

React Native имеет встроенный интерфейс командной строки, который вы можете использовать для создания нового проекта. Вы можете получить доступ к нему, не устанавливая ничего глобально, используя npx, который поставляется вместе с Node.js. Давайте создадим новый проект React Native под названием "AwesomeProject":

1
npx react-native@latest init AwesomeProject

Это не обязательно, если вы интегрируете React Native в существующее приложение, если вы "катапультировались" из Expo, или если вы добавляете поддержку Android в существующий проект React Native (см. Integration with Existing Apps). Вы также можете использовать сторонний CLI для инициализации приложения React Native, например Ignite CLI.

[Опционально] Использование определенной версии или шаблона

Если вы хотите начать новый проект с определенной версией React Native, вы можете использовать аргумент --version:

1
npx [email protected] init AwesomeProject --version X.XX.X

Вы также можете начать проект с пользовательским шаблоном React Native с помощью аргумента --template.

Подготовка устройства Android

Для запуска приложения React Native Android вам понадобится устройство Android. Это может быть либо физическое устройство Android, либо виртуальное устройство Android, которое позволяет эмулировать устройство Android на вашем компьютере.

В любом случае, вам нужно будет подготовить устройство к запуску Android-приложений для разработки.

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

Если у вас есть физическое устройство Android, вы можете использовать его для разработки вместо AVD, подключив его к компьютеру с помощью USB-кабеля и следуя инструкциям здесь.

Использование виртуального устройства

Если вы используете Android Studio для открытия ./AwesomeProject/android, вы можете увидеть список доступных виртуальных устройств Android (AVD), открыв "AVD Manager" из Android Studio. Найдите значок, который выглядит следующим образом:

Android Studio AVD Manager

Если вы недавно установили Android Studio, вам, скорее всего, потребуется создать новое AVD. Выберите "Create Virtual Device...", затем выберите любой Phone из списка и нажмите "Next", затем выберите образ Tiramisu API Level 33.

Если у вас не установлен HAXM, нажмите "Установить HAXM" или следуйте этим инструкциям, чтобы установить его, затем вернитесь в AVD Manager.

Нажмите "Далее", затем "Готово", чтобы создать AVD. На этом этапе вы должны иметь возможность нажать на зеленую кнопку с треугольником рядом с вашим AVD, чтобы запустить его, а затем перейти к следующему шагу.

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

Шаг 1: Запуск Metro

Сначала вам нужно будет запустить Metro, JavaScript bundler, который поставляется вместе с React Native. Metro "принимает входной файл и различные опции, и возвращает один файл JavaScript, который включает весь ваш код и его зависимости." — Metro Docs

Чтобы запустить Metro, запустите npx react-native start в папке проекта React Native:

1
npx react-native start

react-native start запускает Metro Bundler.

Если вы используете менеджер пакетов Yarn, вы можете использовать yarn вместо npx при запуске команд React Native внутри существующего проекта.

Если вы знакомы с веб-разработкой, Metro очень похож на webpack для приложений React Native. В отличие от Kotlin или Java, JavaScript не компилируется, как и React Native. Пакетирование — это не то же самое, что компиляция, но оно может помочь улучшить производительность запуска и перевести некоторые специфические для платформы JavaScript в более широко поддерживаемые JavaScript.

Шаг 2: Запуск приложения

Пусть Metro Bundler запускается в своем собственном терминале. Откройте новый терминал в папке проекта React Native. Выполните следующие действия:

1
npx react-native run-android

Если все настроено правильно, вскоре вы увидите, как ваше новое приложение запускается в эмуляторе Android.

AwesomeProject on Android

npx react-native run-android — это один из способов запустить ваше приложение — вы также можете запустить его прямо из Android Studio.

Если вы не можете заставить его работать, смотрите страницу Troubleshooting.

Модификация вашего приложения

Теперь, когда вы успешно запустили приложение, давайте изменим его.

  • Откройте файл App.tsx в выбранном вами текстовом редакторе и отредактируйте несколько строк.
  • Нажмите дважды клавишу R или выберите Reload в меню Dev (Ctrl + M), чтобы увидеть ваши изменения!

Вот и все!

Поздравляем! Вы успешно запустили и изменили свое первое приложение React Native.

Поздравляем

Что теперь?

  • Если вы хотите добавить этот новый код React Native в существующее приложение, ознакомьтесь с руководством Integration guide.

Если вам интересно узнать больше о React Native, ознакомьтесь с Introduction to React Native.

Не поддерживается

Для создания проектов с нативным кодом для iOS требуется Mac. Чтобы узнать, как создать приложение с помощью Expo Go Quickstart, вы можете использовать Expo.

Целевая ОС

Установка зависимостей

Вам понадобится Node, интерфейс командной строки React Native, JDK и Android Studio.

Хотя вы можете использовать любой редактор по вашему выбору для разработки приложения, вам потребуется установить Android Studio, чтобы настроить необходимые инструменты для создания приложения React Native для Android.

Node

Следуйте инструкции по установке для вашего дистрибутива Linux для установки Node 16 или более новой версии.

Java Development Kit

В настоящее время React Native рекомендует 11 версию Java SE Development Kit (JDK). Вы можете столкнуться с проблемами при использовании более высоких версий JDK. Вы можете скачать и установить OpenJDK с AdoptOpenJDK или с помощью системного упаковщика.

Среда разработки для Android

Настройка среды разработки может быть несколько утомительной, если вы новичок в разработке Android. Если же вы уже знакомы с разработкой Android, вам может понадобиться настроить несколько вещей. В любом случае, пожалуйста, внимательно выполните следующие несколько шагов.

1. Установите Android Studio

Скачайте и установите Android Studio. Находясь в мастере установки Android Studio, убедитесь, что отмечены галочками все следующие пункты:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device.

Затем нажмите "Далее", чтобы установить все эти компоненты.

Если флажки отмечены серым цветом, у вас будет возможность установить эти компоненты позже.

После завершения установки и появления экрана приветствия перейдите к следующему шагу.

2. Установите Android SDK

Android Studio по умолчанию устанавливает последнюю версию Android SDK. Однако для создания приложения React Native с нативным кодом требуется, в частности, SDK Android 13 (Tiramisu). Дополнительные Android SDK могут быть установлены через SDK Manager в Android Studio.

Для этого откройте Android Studio, нажмите на кнопку "Configure" и выберите "SDK Manager".

Менеджер SDK также можно найти в диалоге "Preferences" Android Studio в разделе Appearance & Behavior → System Settings → Android SDK.

Выберите вкладку "SDK Platforms" в SDK Manager, затем установите флажок напротив "Show Package Details" в правом нижнем углу. Найдите и разверните запись Android 13 (Tiramisu), затем убедитесь, что следующие пункты отмечены:

  • Android SDK Platform 33
  • Intel x86 Atom_64 System Image или Google APIs Intel x86 Atom System Image.

Затем выберите вкладку "SDK Tools" и установите флажок напротив "Show Package Details". Найдите и разверните запись "Android SDK Build-Tools", затем убедитесь, что выбрана 33.0.0.

Наконец, нажмите "Применить", чтобы загрузить и установить Android SDK и связанные с ним инструменты сборки.

3. Настройка переменной окружения ANDROID_HOME

Инструменты React Native требуют настройки некоторых переменных окружения для создания приложений с нативным кодом.

Добавьте следующие строки в конфигурационный файл $HOME/.bash_profile или $HOME/.bashrc (если вы используете zsh, то ~/.zprofile или ~/.zshrc):

1
2
3
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

.bash_profile специфичен для bash. Если вы используете другую оболочку, вам нужно будет отредактировать соответствующий файл конфигурации, специфичный для этой оболочки.

Введите source $HOME/.bash_profile для bash или source $HOME/.zprofile для загрузки конфигурации в вашу текущую оболочку. Убедитесь, что ANDROID_HOME был установлен, выполнив echo $ANDROID_HOME, а соответствующие каталоги были добавлены в ваш путь, выполнив echo $PATH.

Пожалуйста, убедитесь, что вы используете правильный путь к Android SDK. Вы можете найти фактическое расположение SDK в диалоге "Preferences" Android Studio, в разделе Appearance & Behavior → System Settings → Android SDK.

Watchman

Следуйте руководству Watchman installation guide для компиляции и установки Watchman из исходников.

Watchman — это инструмент от Facebook для наблюдения за изменениями в файловой системе. Настоятельно рекомендуется установить его для повышения производительности и совместимости в некоторых крайних случаях (перевод: вы можете обойтись без установки этого инструмента, но ваш пробег может быть разным; установка этого инструмента сейчас может спасти вас от головной боли позже).

Интерфейс командной строки React Native

React Native имеет встроенный интерфейс командной строки. Вместо того, чтобы устанавливать и управлять определенной версией CLI глобально, мы рекомендуем вам получить доступ к текущей версии во время выполнения с помощью npx, который поставляется вместе с Node.js. С помощью npx react-native <команда>, текущая стабильная версия CLI будет загружена и выполнена в момент выполнения команды.

Создание нового приложения

Если вы ранее установили глобальный пакет react-native-cli, пожалуйста, удалите его, так как он может вызвать неожиданные проблемы:

1
npm uninstall -g react-native-cli @react-native-community/cli

React Native имеет встроенный интерфейс командной строки, который вы можете использовать для создания нового проекта. Вы можете получить доступ к нему, не устанавливая ничего глобально, используя npx, который поставляется вместе с Node.js. Давайте создадим новый проект React Native под названием "AwesomeProject":

1
npx react-native@latest init AwesomeProject

Это не обязательно, если вы интегрируете React Native в существующее приложение, если вы "катапультировались" из Expo, или если вы добавляете поддержку Android в существующий проект React Native (см. Integration with Existing Apps). Вы также можете использовать сторонний CLI для инициализации вашего приложения React Native, например Ignite CLI.

[Опционально] Использование определенной версии или шаблона

Если вы хотите начать новый проект с определенной версией React Native, вы можете использовать аргумент --version:

1
npx [email protected] init AwesomeProject --version X.XX.X

Вы также можете начать проект с пользовательским шаблоном React Native с помощью аргумента --template.

Подготовка устройства Android

Для запуска приложения React Native Android вам понадобится устройство Android. Это может быть либо физическое устройство Android, либо виртуальное устройство Android, которое позволяет эмулировать устройство Android на вашем компьютере.

В любом случае, вам нужно будет подготовить устройство к запуску Android-приложений для разработки.

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

Если у вас есть физическое устройство Android, вы можете использовать его для разработки вместо AVD, подключив его к компьютеру с помощью USB-кабеля и следуя инструкциям здесь.

Использование виртуального устройства

Если вы используете Android Studio для открытия ./AwesomeProject/android, вы можете увидеть список доступных виртуальных устройств Android (AVD), открыв "AVD Manager" из Android Studio. Найдите значок, который выглядит следующим образом:

Android Studio AVD Manager

Если вы недавно установили Android Studio, вам, скорее всего, потребуется создать новое AVD. Выберите "Create Virtual Device...", затем выберите любой Phone из списка и нажмите "Next", затем выберите образ Tiramisu API Level 33.

Мы рекомендуем настроить VM acceleration в вашей системе для повышения производительности. Выполнив эти инструкции, вернитесь в AVD Manager.

Нажмите "Далее", затем "Готово", чтобы создать AVD. На этом этапе вы должны иметь возможность нажать на зеленую кнопку с треугольником рядом с AVD, чтобы запустить его, а затем перейти к следующему шагу.

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

Шаг 1: Запуск Metro

Сначала вам нужно будет запустить Metro, JavaScript bundler, который поставляется вместе с React Native. Metro "принимает входной файл и различные опции, и возвращает один файл JavaScript, который включает весь ваш код и его зависимости." — Metro Docs

Чтобы запустить Metro, запустите npx react-native start в папке проекта React Native:

1
npx react-native start

react-native start запускает Metro Bundler.

Если вы используете менеджер пакетов Yarn, вы можете использовать yarn вместо npx при запуске команд React Native внутри существующего проекта.

Если вы знакомы с веб-разработкой, Metro очень похож на webpack для приложений React Native. В отличие от Kotlin или Java, JavaScript не компилируется, как и React Native. Пакетирование — это не то же самое, что компиляция, но оно может помочь улучшить производительность запуска и перевести некоторые специфические для платформы JavaScript в более широко поддерживаемые JavaScript.

Шаг 2: Запуск приложения

Пусть Metro Bundler запускается в своем собственном терминале. Откройте новый терминал в папке проекта React Native. Выполните следующие действия:

1
npx react-native run-android

Если все настроено правильно, вскоре вы увидите, как ваше новое приложение запускается в эмуляторе Android.

npx react-native run-android — это один из способов запустить ваше приложение — вы также можете запустить его прямо из Android Studio.

Если у вас не получается, обратитесь к странице Устранение неполадок.

Модификация вашего приложения

Теперь, когда вы успешно запустили приложение, давайте изменим его.

  • Откройте файл App.tsx в выбранном вами текстовом редакторе и отредактируйте несколько строк.
  • Нажмите дважды клавишу R или выберите Reload в меню Dev (Ctrl + M), чтобы увидеть ваши изменения!

Вот и все!

Поздравляем! Вы успешно запустили и изменили свое первое приложение React Native.

Поздравляем

Что теперь?

  • Если вы хотите добавить этот новый код React Native в существующее приложение, ознакомьтесь с руководством Integration guide.

Если вам интересно узнать больше о React Native, ознакомьтесь с Introduction to React Native.

Не поддерживается

Для создания проектов с нативным кодом для iOS требуется Mac. Чтобы узнать, как создать приложение с помощью Expo Go Quickstart, вы можете использовать Expo.

Комментарии