Pull to refresh
Neoflex
Создаем ИТ-платформы для цифровой трансформации

Как развернуть окружение для разработки приложений на React Native на Windows

Reading time2 min
Views48K

Доброго времени суток!


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

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



Итак, начнём:

Node, Python2, JDK


  • Установить NodeJS. У меня последняя версия на момент написания статьи 10.11.0
  • Установить Python2 и JavaSE. Использовался jdk-10.0.2


React Native CLI


  • Установим React Native CLI

npm install -g react-native-cli

Android development environment


  • Скачиваем и устанавливаем Android Studio

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

    image

    Далее отмечаем галочкой «Android Virtual Device» и указываем пусть до папки Android — либо оставляем как есть C:\Users\%USERNAME%\AppData\Local\Android\Sdk
    Главное, чтобы в пути не было кириллицы!
    Особенно с этим могут возникнут проблемы в будущем. Например, у меня имя пользователя системы было на кириллице «C:\Users\Александр», и после запуска приложения grandle не мог найти путь, т. к. путь выглядел как «C:\Users\????????\...»

    image

    Нажимаем «далее». Оставляем рекомендуемый объем оперативной памяти, нажимаем далее и устанавливаем.
  • Android SDK — открываем студию и переходим в настройки
    Appearance & Behavior → System Settings → Android SDK.

    На вкладке «SDK Platforms» включаем галочку «Show Package Details» и для «Android 8.0 (Oreo)» устанавливаем:

    • Android SDK Platform 26
    • Intel x86 Atom_64 System Image
    • Google APIs Intel x86 Atom_64 System Image

    image

    Теперь выбираем вкладку «SDK Tools», включаем галочку «Show Package Details»
    и устанавливаем пакет

    • «28.0.3»

    Нажимаем "Apply".


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


  • ANDROID_HOME
    Создадим переменную для ANDROID_HOME:

    image

    • Имя переменной ANDROID_HOME
    • Значение переменной (можно посмотреть в Android Studio)

    image
  • JAVA_HOME
    По аналогии создадим переменную JAVA_HOME:

    • Имя переменной: JAVA_HOME
    • Значение переменной: C:\Program Files\Java\jdk-(версия)

  • Изменим системную переменную Path:

    image

    Добавим 4 значения:

    1. %JAVA_HOME%\bin
    2. %ANDROID_HOME%
    3. %ANDROID_HOME%\platform-tools
    4. %ANDROID_HOME%\watchman


Создаем приложение и запускаем эмулятор


  • Переходим в удобную для нас папку в консоли и набираем:
    react-native init MyTestProject
  • Открываем в Android Studio наш проект и открываем AVD Manager

    image

    Если AVD не скачан, скачиваем и запускаем
  • Далее переходим в консоли в папку с приложением и набираем:
    react-native run-android

    После чего нашел приложение запустилось.

В этой статье использовались официальное руководство от React Native
+ личный опыт!

Надеюсь, эта статья поможет тем, кто столкнулся с проблемами или решил начать разрабатывать нативные приложения на React
.
Tags:
Hubs:
Total votes 15: ↑12 and ↓3+9
Comments9

Articles

Information

Website
www.neoflex.ru
Registered
Founded
Employees
1,001–5,000 employees
Location
Россия