Spec-Zone.ru › React Native

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

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

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

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

  • Быстрый старт Expo Go
  • Быстрый старт React Native CLI

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

  • npm
  • Yarn
npx create-expo-app AwesomeProject

cd AwesomeProject
npm start # you can also use: npx expo start
yarn create expo-app AwesomeProject

cd AwesomeProject
yarn start # you can also use: yarn expo start

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

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

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

Изменение вашего приложения

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

Готово!

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

Что дальше?

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

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

Если вы хотите узнать больше о React Native, ознакомьтесь с введением в React Native.

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

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

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

Ограничения

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

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

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

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

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

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

Операционная система разработки

  • macOS
  • Windows
  • Linux

Целевая ОС

  • Android
  • iOS

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

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

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

Node и Watchman

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

brew install node
brew install watchman

Если Node уже установлен на вашей системе, убедитесь, что это версия Node 14 или выше.

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

Java Development Kit

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

brew tap homebrew/cask-versions
brew install --cask zulu11

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

Если JDK уже установлен на вашей системе, убедитесь, что это версия JDK 11 или выше.

Среда разработки 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 12 (S). Дополнительные SDK Android можно установить через диспетчер SDK в Android Studio.

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

Android Studio Welcome

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

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

  • Android SDK Platform 31
  • 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" и установите флажок рядом с "Показать детали пакета" здесь. Найдите и разверните запись "Android SDK Build-Tools", затем убедитесь, что выбран 31.0.0.

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

3. Настройка переменной среды ANDROID_SDK_ROOT

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

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

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

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

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

Убедитесь, что вы используете правильный путь к Android SDK. Вы можете найти фактическое расположение SDK в диалоговом окне "Настройки" Android Studio, в разделе **Вид и поведение** → **Системные настройки** → **Android SDK**.

Командная строка React Native

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

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

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

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

npx react-native init AwesomeProject

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

[Необязательно] Использование конкретной версии или шаблона

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

npx react-native init AwesomeProject --version X.XX.X

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

npx react-native init AwesomeTSProject --template react-native-template-typescript

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

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

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

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

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

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

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

Android Studio AVD Manager

Если вы недавно установили Android Studio, вам, вероятно, потребуется создать новое AVD. Выберите "Создать виртуальное устройство...", затем выберите любой телефон из списка и нажмите "Далее", затем выберите изображение S API Level 31.

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

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

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

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

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

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. Выполните следующее:

npx react-native run-android

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

AwesomeProject on Android

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

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

Изменение вашего приложения

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

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

Готово!

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

Что дальше?

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

Если вы хотите узнать больше о React Native, ознакомьтесь с Введением в React Native.

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

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

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

Node и Watchman

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

brew install node
brew install watchman

Если у вас уже установлен Node на вашей системе, убедитесь, что это Node 14 или более поздней версии.

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

Xcode

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

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

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

Вам также потребуется установить инструменты командной строки Xcode. Откройте Xcode, затем выберите «Настройки…» из меню Xcode. Перейдите к панели «Расположения» и установите инструменты, выбрав последнюю версию в раскрывающемся списке «Инструменты командной строки».

Xcode Command Line Tools

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

Для установки симулятора откройте Xcode > Настройки... и выберите вкладку Компоненты. Выберите симулятор с соответствующей версией iOS, которую вы хотите использовать.

CocoaPods

CocoaPods разработан с использованием Ruby, и он будет устанавливаться с помощью стандартного Ruby, доступного в macOS.

Использование стандартного Ruby, доступного в macOS, потребует использования sudo при установке драгоценных камней. (Это проблема только на период установки драгоценного камня.)

sudo gem install cocoapods

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

Дополнительную информацию можно найти в Руководстве CocoaPods по началу работы.

Примечание для пользователей Mac M1

Архитектура Mac M1 несовместима напрямую с CocoaPods. Если вы столкнетесь с проблемами при установке подключаемых модулей, вы можете решить их, выполнив:

  • sudo arch -x86_64 gem install ffi
  • arch -x86_64 pod install

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

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

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

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

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

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

npx react-native init AwesomeProject

Это не требуется, если вы интегрируете React Native в существующее приложение, если вы «выбросили» из Expo или если вы добавляете поддержку iOS в существующий проект React Native (см. Интеграцию с существующими приложениями). Вы также можете использовать сторонний интерфейс командной строки для инициализации вашего приложения React Native, например, Ignite CLI.

[Необязательно] Использование определенной версии или шаблона

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

npx react-native init AwesomeProject --version X.XX.X

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

npx react-native init AwesomeTSProject --template react-native-template-typescript

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

[Необязательно] Настройка вашей среды

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

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

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

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

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

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

Для запуска Metro выполните npx react-native start в папке вашего проекта React Native:

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. Выполните следующее:

npx react-native run-ios

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

AwesomeProject on iOS

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

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

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

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

Изменение вашего приложения

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

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

Готово!

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

Что дальше?

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

Если вы хотите узнать больше о React Native, ознакомьтесь с Введением в React Native.

Целевая ОС

  • Android
  • iOS

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

Вам потребуются 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.

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

choco install -y nodejs-lts openjdk11

Если вы уже установили Node на вашей системе, убедитесь, что это Node 14 или более поздней версии. Если у вас уже есть JDK на вашей системе, убедитесь, что это версия 11 или более поздняя.

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

Если вы используете последнюю версию Java Development Kit, вам необходимо изменить версию Gradle вашего проекта, чтобы он мог распознать JDK. Вы можете сделать это, перейдя в {project root folder}\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 Virtual Device
  • Если вы ещё не используете Hyper-V: Performance (Intel ® HAXM) (См. здесь для AMD или Hyper-V)

Затем нажмите «Далее» для установки всех этих компонентов.

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

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

2. Установка Android SDK

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

Для этого откройте Android Studio, нажмите кнопку «Дополнительные действия» и выберите «Диспетчер SDK».

Android Studio Welcome

Диспетчер SDK также можно найти в диалоговом окне «Настройки» Android Studio, в разделе Вид & Поведение → Настройки системы → Android SDK.

Выберите вкладку «SDK Platforms» в диспетчере SDK, затем установите флажок «Показать детали пакета» в правом нижнем углу. Найдите и разверните запись Android 12 (S), затем убедитесь, что установлены следующие элементы:

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

Далее, выберите вкладку «SDK Tools» и установите флажок «Показать детали пакета» и здесь. Найдите и разверните запись «Android SDK Build-Tools», затем убедитесь, что 31.0.0 выбрано.

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

3. Настройка переменной среды ANDROID_HOME

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

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

ANDROID_HOME Environment Variable

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

%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. Выберите переменную Path.
  5. Нажмите Изменить.
  6. Нажмите Создать и добавьте путь к platform-tools в список.

По умолчанию этот каталог находится по следующему пути:

%LOCALAPPDATA%\Android\Sdk\platform-tools

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

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

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

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

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

npx react-native init AwesomeProject

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

[Необязательно] Использование определенной версии или шаблона

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

npx react-native init AwesomeProject --version X.XX.X

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

npx react-native init AwesomeTSProject --template react-native-template-typescript

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

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

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

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

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

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

Если вы используете Android Studio для открытия ./AwesomeProject/android, вы можете увидеть список доступных виртуальных устройств Android (AVD), открыв «Диспетчер AVD» в Android Studio. Найдите значок, похожий на этот:

Android Studio AVD Manager

Если вы недавно установили Android Studio, вам, скорее всего, потребуется создать новое AVD. Выберите «Создать виртуальное устройство...», затем выберите любой телефон из списка и нажмите «Далее», затем выберите образ S API Level 31.

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

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

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

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

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

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

npx react-native start

react-native start запускает бандлер Metro.

``` END_OF_DOCUMENT_MARKER

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

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

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

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

npx react-native run-android

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

AwesomeProject on Android

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

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

Изменение вашего приложения

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

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

Всё готово!

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

Что дальше?

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

Если вы хотите узнать больше о React Native, ознакомьтесь с введением в React Native.

Неподдерживаемое

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

Целевая ОС

  • Android
  • iOS

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

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

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

Node

Следуйте инструкциям по установке для вашей дистрибуции Linux, чтобы установить Node 14 или новее.

Java Development Kit

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

Среда разработки 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 12 (S). Дополнительные Android SDK можно установить через менеджер SDK в Android Studio.

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

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

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

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

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

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

3. Настройка переменной среды ANDROID_SDK_ROOT

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

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

export ANDROID_SDK_ROOT=$HOME/Library/Android/Sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

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

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

Убедитесь, что вы используете правильный путь к Android SDK. Вы можете найти фактическое расположение SDK в диалоговом окне "Настройки" Android Studio, в разделе Вид и поведение → Настройки системы → Android SDK.

Watchman

Следуйте инструкции по установке Watchman, чтобы скомпилировать и установить Watchman из исходного кода.

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

React Native Command Line Interface

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

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

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

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

npx react-native init AwesomeProject

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

[Необязательно] Использование определенной версии или шаблона

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

npx react-native init AwesomeProject --version X.XX.X

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

npx react-native init AwesomeTSProject --template react-native-template-typescript

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

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

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

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

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

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

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

Android Studio AVD Manager

Если вы недавно установили Android Studio, вам, вероятно, потребуется создать новое AVD. Выберите "Создать виртуальное устройство...", затем выберите любой телефон из списка и нажмите "Далее", затем выберите образ S API Level 31.

Мы рекомендуем настроить ускорение виртуальной машины на вашей системе для повышения производительности. После выполнения этих инструкций вернитесь к менеджеру AVD.

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

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

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

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

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

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. Выполните следующее:

npx react-native run-android

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

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

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

Изменение вашего приложения

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

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

Всё готово!

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

Что дальше?

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

Если вы хотите узнать больше о React Native, ознакомьтесь с Введением в React Native.

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

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

© 2022 Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://reactnative.dev/docs/environment-setup

END_OF_DOCUMENT_MARKER

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API