React Native - это JavaScript-фреймворк для разработки кроссплатформенных мобильных приложений для iOS и Android. Он основан на React, популярной библиотеке JavaScript Facebook для создания пользовательских интерфейсов для мобильных платформ.
Поскольку мне очень нравилась разработка кроссплатформенных мобильных приложений, я решил изучить и использовать React Native для разработки приложений для Android. Однако я столкнулся с множеством проблем, просто чтобы настроить среду разработки. Настройка React Native в Windows является сложной задачей и требует внимания к множеству движущихся частей, даже если вы хотите запустить базовое приложение на эмуляторе.
В этой статье я расскажу, как настроить среду разработки в Windows с помощью React Native framework и Android Studio для создания приложений Android.
Я буду использовать следующие инструменты для настройки своей среды разработки:
- Окна
- Диспетчер пакетов узлов (NPM)
- Node.js (версия 8 или новее)
- Интерфейс командной строки React Native (React Native CLI)
- Комплект для разработки Java (JDK 8 или новее)
- Android Studio
- Встроенный эмулятор в Android Studio
- Код Visual Studio
Шаг 1. Установка кода Visual Studio
Загрузите и установите последнюю версию Visual Studio Code для Windows с https://code.visualstudio.com/
Шаг 2: установка Android Studio
- Загрузите и установите последнюю версию Android Studio для Windows с https://developer.android.com/studio/.
- Android Studio по умолчанию устанавливает последнюю версию Android SDK. React Native требует Android 6.0 (Marshmallow) SDK или выше. Решил использовать Android 7.1.1 (Nougat). Не стесняйтесь использовать последнюю версию SDK.
- Убедитесь, что у вас установлены следующие инструменты SDK:
Важно: вам понадобится Intel x86 Emulator Accelerator (установщик HAXM) для запуска эмулятора в Windows. Для получения дополнительной информации перейдите по следующей ссылке: https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows
Примечание. Вам необходимо включить технологию виртуализации Intel, изменив настройку BIOS. Посмотрите, как это делается, по следующей ссылке:
- Настройте переменную среды ANDROID_HOME. Откройте панель «Система» в разделе Система и безопасность панели управления Windows, затем нажмите Изменить настройки. Откройте вкладку Дополнительно и нажмите Переменные среды. Нажмите Создать, чтобы создать новую пользовательскую переменную ANDROID_HOME, указывающую путь к вашему Android SDK:
- Наконец, добавьте Android Debug Bridge (ADB) в переменную среды PATH. Это поможет вам узнать, какие устройства подключены или какие эмуляторы работают в данный момент. Место установки ADB: C: \ Users \ apatil \ AppData \ Local \ Android \ Sdk \ platform-tools \ adb.exe
Шаг 3: установка узла
- Загрузите и установите последнюю версию Node.js с https://nodejs.org/en/. Примечание. Npm устанавливается вместе с Node.js.
Примечание. Убедитесь, что вы добавили NPM в переменную среды PATH.
- После установки npm установите React Native CLI, выполнив следующую команду из командной строки Windows или встроенного терминала в Visual Studio Code. Примечание. Встроенный терминал можно найти в Вид → Встроенный терминал.
npm install -g react-native-cli
Шаг 4: Использование встроенного JDK
Android Studio поставляется со встроенным JDK, который рекомендуется. Убедитесь, что вы отметили следующий параметр в разделе Файл → Другие настройки → Структура проекта по умолчанию в Android Studio:
Шаг 5: Создание нового приложения React Native
Наконец, давайте создадим наше первое приложение React Native, выполнив следующую команду в вашем рабочем пространстве.
react-native init SampleReactNativeProject
Это создает следующую структуру каталогов проекта при открытии проекта в Visual Studio Code.
Шаг 6. Сборка для Android
- Прежде чем мы продолжим и запустим приложение, откройте каталог «android» в нашем проекте в Android Studio и создайте каталог «assets» в app / src / main.
- Чтобы упростить процесс сборки и установки, в package.json добавьте следующий скрипт в раздел «scripts»:
"android-windows": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android"- Теперь выполните следующую команду, чтобы установить приложение и увидеть, как оно работает на эмуляторе. Это запускает скрипт, который мы установили в package.json.
npm run android-windows
Это запускает экземпляр Metro Bundler в новом экземпляре командной строки и устанавливает приложение на эмулятор, как показано ниже:
Примечание. Если вы по-прежнему сталкиваетесь со следующей ошибкой: «java.lang.UnsupportedClassVersion Error: com / android / build / gradle / AppPlugIn: Unsupported major.minor version 52.0», убедитесь, что вы проверили встроенный JDK, как показано на шаге 4 выше.
Эта статья также была размещена в Let’s React информационном бюллетене React Native .
Если вам понравилось читать эту статью, оставьте свои комментарии или нажмите значок хлопка ниже, чтобы выразить свою признательность. Если вы хотите, чтобы другие получили пользу от этой статьи и помогли распространить информацию, поделитесь ею в своей любимой социальной сети. Спасибо за уделенное время.
Обо мне
Амрут - инженер-программист Full Stack, увлеченный технологиями, веб-приложениями и мобильными приложениями. Ему нравится писать о программировании, инвестировании, торговле, финансах и экономике. В свободное время Амрут любит разбираться в бизнес-моделях публичных компаний и анализировать их финансовую отчетность. Он твердо верит в то, что качественная работа повышает ценность жизни людей и дает людям возможность контролировать свои личные финансы. Он также любит смотреть и обсуждать американский футбол.
Эта история опубликована в The Startup, крупнейшем предпринимательском издании Medium, за которым следят +423 678 человек.
Подпишитесь, чтобы получать наши главные новости здесь.
