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

  • Tutorial

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


Решив начать разрабатывать приложения на 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
.
Неофлекс
56,00
Компания
Поделиться публикацией

Комментарии 8

    +4
    Наверно нужно дополнить название (… на Windows)
      0
      Наверно нужно дополнить название (… приложений на React Native под Android ...)
        0
        На Windows по умолчанию невозможно делать приложение iOS на RN. Так что стоит ли.
          +1
          Так речь не только про iOS. Никто не отменял react-native run-windows
          0
          Кстати да. Мало смысла разработки на react-native, если нет возможности дебажить сразу на двух эмуляторах (андройд и айос).
            0
            Статья написана для тех кто начинает разбираться с react-native, поэтому есть смысл начать на windows под android, т.к. для IOS код не будет сильно отличаться.
              0
              Да, я согласен, что статья больше про «как», а не «почему».
          0
          Не хватало подобного руководства )

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

          Самое читаемое