Как установить react native для windows
Обновлено: 07.07.2024
React Native для Windows позволяет создавать приложения универсальной платформы Windows (UWP) с помощью React.
Общие сведения о React Native
React Native — это платформа для разработки мобильных приложений с открытым кодом, созданная Facebook. Она используется для разработки приложений для Android, iOS, Интернета и UWP (Windows). Решение предоставляет собственные элементы управления пользовательского интерфейса и полный доступ к собственной платформе. Для работы с React Native требуется понимание основ JavaScript.
Дополнительные сведения о React см. в статье Общие сведения о React.
Предварительные требования
Требования к установке для использования React Native для Windows см. на странице с описанием требований к системе. Убедитесь, что в приложении "Параметры" Windows включен режим разработчика.
Установить React Native для Windows
Вы можете создать классическое приложение Windows с помощью React Native для Windows. Для этого сделайте следующее:
Откройте окно командной строки (терминал) и перейдите в каталог, в котором нужно создать проект классического приложения Windows.
Эту команду можно выполнить с помощью npx, чтобы создать проект React Native без локальной или глобальной установки дополнительных средств. Команда создаст приложение React Native в каталоге, определяемым <projectName> .
Перейдите в каталог проекта и выполните следующую команду, чтобы установить пакеты React Native для Windows:
Чтобы запустить приложение, сначала запустите веб-браузер (например, Microsoft Edge), а затем выполните следующую команду:
Отладка классического приложения React Native с помощью Visual Studio
- Рабочие нагрузки — разработка приложений универсальной платформы Windows и разработка классических приложений на C++.
- Отдельные компоненты — действия разработки и поддержка разработки Node.js.
Откройте файл решения в папке приложения в Visual Studio (например, AwesomeProject/windows/AwesomeProject.sln, если вы использовали AwesomeProject как <projectName>).
Выберите конфигурацию "Отладка" и платформу x64 в поле со списком слева от кнопки "Выполнить" и под пунктом меню "Команда и инструменты".
Выполните yarn start из каталога проекта и дождитесь, пока упаковщик React Native проинформирует об успешном выполнении.
Нажмите клавишу F12 или клавиши CTRL+SHIFT+I, чтобы открыть средства разработчика в веб-браузере.
Отладка классического приложения React Native с помощью Visual Studio Code
Откройте папку приложения в VS Code.
Создайте файл в корневом каталоге приложений (.vscode/launch.json) и вставьте следующую конфигурацию:
Нажмите клавишу F5 или перейдите в меню "Отладка" (также можно нажать клавиши CTRL+SHIFT+D), в раскрывающемся списке "Отладка" выберите "Отладка Windows" и нажмите зеленую стрелку, чтобы запустить приложение.
Решив начать разрабатывать приложения на React Native, я столкнулся с проблемами разворачивания окружения. Сегодня я хочу поделиться опытом его настройки.
Конечно, на официальном сайте есть подробное описание, но следуя только этим рекомендациям, было довольно сложно сделать все настройки.
Итак, начнём:
Node, Python2, JDK
- Установить NodeJS. У меня последняя версия на момент написания статьи 10.11.0
- Установить Python2 и JavaSE. Использовался jdk-10.0.2
React Native CLI
Android development environment
После запуска выбираем кастомную установку
Далее отмечаем галочкой «Android Virtual Device» и указываем пусть до папки Android — либо оставляем как есть C:\Users\%USERNAME%\AppData\Local\Android\Sdk
Главное, чтобы в пути не было кириллицы!
Особенно с этим могут возникнут проблемы в будущем. Например, у меня имя пользователя системы было на кириллице «C:\Users\Александр», и после запуска приложения grandle не мог найти путь, т. к. путь выглядел как «C:\Users\. \. »
На вкладке «SDK Platforms» включаем галочку «Show Package Details» и для «Android 8.0 (Oreo)» устанавливаем:
Теперь выбираем вкладку «SDK Tools», включаем галочку «Show Package Details»
и устанавливаем пакет
Переменные среды
-
ANDROID_HOME
Создадим переменную для ANDROID_HOME:
- Имя переменной: JAVA_HOME
- Значение переменной: C:\Program Files\Java\jdk-(версия)
Добавим 4 значения:
- %JAVA_HOME%\bin
- %ANDROID_HOME%
- %ANDROID_HOME%\platform-tools
- %ANDROID_HOME%\watchman
Создаем приложение и запускаем эмулятор
- Переходим в удобную для нас папку в консоли и набираем:
react-native init MyTestProject - Открываем в Android Studio наш проект и открываем AVD Manager
В этой статье использовались официальное руководство от React Native
+ личный опыт!
Надеюсь, эта статья поможет тем, кто столкнулся с проблемами или решил начать разрабатывать нативные приложения на React
Данная статья поможет настроить рабочее окружение React Native на операционной системе Windows 10.
На всех этапах установки пользователь должен иметь права Администратора и подключен к сети Интернет.
Инструкция зависит от Вашей операционной системы и от того, под какую мобильную ОС (Android или iOS) решите разрабатывать приложение. Данная статья ориентирована под ОС разработки Windows, среду разработки Android Studio и мобильную ОС Android.
Установка Chocolatey
Chocolatey — менеджер пакетов в среде Windows по аналогии с apt-get в Linux, позволяющий установить Node, Python2 и др. Устанавливается менеджер пакетов Chocolatey через консольную оболочку PowerShell . Для запуска PowerShell на кнопке Пуск вызываем контекстное меню (нажатием правой клавиши мыши) и выбираем пункт Windows PowerShell (администратор) .
Рядом с меню Пуск кнопка Поиск -> вводим PowerShell и через контекстное меню выбираем Запуск от имени администратора .
Откроется оболочка PowerShell в консольном режиме. Для проверки возможности запуска скриптов от сторонних производителей вводим команду:
По умолчанию использование сторонних скриптов заблокировано (Restricted). Разрешим выполнение сторонних скриптов командой:
Выполнение команды потребует подтверждения, отвечаем символом Y (Yes).
Проверим разблокировку запуска скриптов из консоли предыдущей командой:
При успешном выполнении ответом будет Bypass .
Теперь можно использовать сторонние скрипты. Установим менеджер пакетов Chocolatey следующей командой:
После окончания загрузки Chocolatey можно проверить корректность установки данного пакета. Вводим в PowerShell команду:
На время написание данной статьи версия Chocolatey v0.10.15 .
Установка пакетов Node, Python2, JDK
Приступаем к установке пакетов Node, Python2 и JDK через PowerShell командой:
Install – ключ установки пакетов
-y - ключ (yes) автоматической установки пакетов
nodejs.install, python2, openjdk8 - название устанавливаемых пакетов.
Начнется загрузка и установка пакетов. После установки каждого пакета будет соответствующая надпись о том, что он установлен успешно (successful).
Установка Android Studio
Версия Android Studio на момент написания этой статьи 4.0.1 . Загружаем и устанавливаем Android Studio. Во время установки убедитесь, что выбраны пункты:
- Android SDK
- Android SDK Platform
- Android Virtual Device
Рекомендуем использовать стандартные пути установки.
Для установки требуется порядка 40 Гб свободного пространства диска C: Можно установить пакет на диск D:, но тогда потребуется изменить переменные окружения пользователя.
Затем нажмите кнопку Далее , чтобы установить все эти компоненты.
Установка Android SDK
Android Studio по умолчанию предлагает установить последнюю стабильную версию Android SDK для создания приложения React Native с использованием нативного кода (на момент написания статьи рекомендованная версия Android SDK Platform 29.0.2).
В начальном окне Android Studio открываем справа снизу раздел Configure .
Выбираем пункт SDK Manager .
В подразделе Android SDK на вкладке SDK Platforms в правом нижнем углу установите флажок Show Package Details . Найдите и разверните список Android 10 (Q) , и убедитесь, что отмечены следующие элементы:
- Android SDK Platform 29
- Intel x86 Atom_64 System Image и/или Google APIs Intel x86 Atom System Image
Затем выберите вкладку SDK Tools и также установите флажок рядом с Show Package Details .
Найдите и разверните запись с пунктом Android SDK Build-Tools , убедитесь, что выбрана версия 29.0.2 .
Наконец, нажмите Apply , чтобы загрузить и установить Android SDK и соответствующие инструменты сборки.
Настройка переменных среды
Инструменты React Native требуют настройки некоторых переменных среды для создания приложений с использованием собственного кода. Откройте панель управления Windows .
Нажмите Учетные записи пользователей , затем снова нажмите Учетные записи пользователей .
Нажмите на Изменить мои переменные среды .
Путь до Android SDK можно узнать в пункте настроек SDK Manager .
Проверяем изменение параметров сред в PowerShell командой:
Если пути не обновились необходимо перезагрузить компьютер и проверить заново.
Настройка эмулятора
Для того что бы создать или настроить эмулятор нужно, находясь на главном окне Android Studio , выбрать пункт Configure -> AVD Manager .
Далее нажать кнопку Create Virtual Device. ,
выбираем модель эмулируемого смартфона (Например, Pixel 2) и нажимаем кнопку Next .
В открывшемся окне в столбце Release Name выбрать Q Download (Download является ссылкой на скачивание выбранного образа эмулятора), скачивание и установка начнется автоматически. На момент создания инструкции рекомендуемый API Level 29 , при установке уточните актуальную версию.
Затем нажмите кнопку Next -> Finish . Можно проверить работу эмулятора нажав на зеленую кнопку в форме треугольника, должен появится интерфейс в виде смартфона.
Подключение реального Андроид девайса
Если возникли проблемы с эмулятором, не отчаивайтесь, можно использовать реальный смартфон. Для этого нужно стать разработчиком в своем смартфоне. Для этого переходим в настройки смартфона и выбираем пункт Об устройстве Далее нужно найти пункт Версия. и нажать 5-7 до того пока не появится надпись "Вы стали разработчиком". Подключаем смартфон через USB кабель и в зависимости от прошивки включаем режим отладки по USB. Для каждой прошивки алгоритм включения отличается друг от друга. Подробнее.
Создание проекта React Native
React Native имеет встроенный интерфейс командной строки, который вы можете использовать для создания нового проекта. Вы можете получить к нему доступ командой npx , которое поставляется с Node.js .
Давайте создадим новый проект React Native под названием MyProject .
Для создания проекта на React Native нужно запустить PowerShell от имени администратора, затем в нём с помощью команды cd перейти в папку c Вашим будущим проектом (например: cd D:\MyProjects ). Далее вводим команду:
Запуск React Native
Во-первых, вам нужно запустить Metro Bundler , сборщик JavaScript , который поставляется с React Native . Metro «принимает входной файл и различные параметры и возвращает один файл JavaScript , который включает весь ваш код и его зависимости». - Metro Docs.
Чтобы запустить Metro Bundler , выполните команду в PowerShell npx react-native start в папке c Вашим созданным проектом (например: cd D:\MyProjects\MyReact ) :
Данная команда запустит Metro Bundler и скомпилирует проект.
В дальнейшем первое окно PowerShell c Metro Bundler не закрываем , но можно свернуть его в фоновый режим.
Запуск приложения
Для запуска Вашего проекта React Native открываем второе окно PowerShell и переходим в папку с Вашим проектом выполняя команды:
Запустится Эмулятор или подключаем реальный смартфон с включенным режимом отладки по USB для просмотра результата.
На экране эмулятора или смартфона должен появится экран приветствия React Native .
Редактирование кода в приложении - Hello World
Для редактирования кода открываем папку с проектом любым редактором кода (рекомендуем Visual Studio Code). Редактирование начинаем с файла App.js . При изменении и сохранении кода, Ctrl + S , происходит автоматическое обновление интерфейса нашего приложения на экране эмулятора.
Вставьте в файл App.js следующий код и нажмите Ctrl + S :
На экране со светлым фоном в вверху в центре появиться надпись «Hello World».
Проблемы?
Чтобы узнать, насколько хорошо вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в боте Telegram.
Доброе время суток, друзья! В этой статье я бы хотел поделиться опытом создания и настройки своего первого приложения на React Native. Зачем вообще может понадобиться React Native, мне кажется объяснять не стоит, но все же хотелось бы сказать пару слов, зачем это понадобилось мне.
В процессе работы у меня появилась вынужденная необходимость создания несложного мобильного приложения, и, с учетом того, что я все время занимаюсь разработкой приложений и сайтов в сети интернет и использую в своей работе, как правило, PHP и Javascript, то создание мобильного приложения для смартфона, да еще к тому же сразу для двух платформ: IOS и Android, для меня показалось сомнительной, хоть и интересной задачей. И, как не удивительно, React Native в моем случае показался единственным реальным и рабочим инструментом, который к тому же осуществляет поддержку достаточно большого количества мобильных устройств. Заявленная поддержка – это Android 4.1 (API 16) и >= iOS 8.0. А это порядка 98% пользователей Android и более 90% пользователей IOS.
Что потребуется для установки React Native, запуска и работы с приложением?
К счастью, запуск и настройка инструментария для создания своего приложения достаточно просты. Все что, потребуется – это скачать приложение для вашего телефона, которое называется Expo, редактор кода и терминал. Данное приложение доступно в Google Play и App Store для скачивания. Если вы не хотите устанавливать данное приложение на ваш телефон, то вы также можете зарегистрироваться на сайте expo.io, где у вас будет возможность разрабатывать ваше приложение через ваш браузер.
Сразу хочу сказать, что когда я скачал данное приложение для IPhone, то для его запуска потребовалось добавить проект в "мои проекты" на expo.io. На Android все было проще, поскольку было достаточно просканировать QR код, который любезно сгенерировала мне утилита create-react-native-app.
Важно: требуется понимать, что у вас должен быть установлен node.js на вашем компьютере и npm.
Наши дальнейшие действия таковы:
- 1 — заходим в терминал и устанавливаем create-react-native-app глобально, если он не установлен, командой: npm install -g create-react-native-app
- 2 — затем создаем проект вводом команды: create-react-native-app MyApp
- 3 — переходим в папку проекта: cd MyApp
- 4 — запускаем проект: npm start
Примерный результат запуска приложения на вашем устройстве (рис.1)
Рис.1
Все готово. Теперь можно сгенерировать QR код для вашего телефона, просканировать его и можно писать нативное приложение на Javascript для ваших мобильных устройств.
Сообщество DevSchacht растёт, накапливает контент и завоёвывает преданных читателей. В свою очередь последние всегда желают получать информацию быстро и удобно. А лучше сразу на своё мобильное устройство. Можно сделать сайт, а можно пойти дальше и создать полноценное приложение, которое будет уведомлять о новых статьях, кешировать их и позволит читать там, где нет мобильной связи (например, в метро).
И тут у нас есть два варианта: новый кленовый PWA и старое доброе нативное приложение. К сожалению, PWA пока не работают полноценно на iOS (как минимум до появления сервис-воркеров в Safari). А написание нативных приложений требует знаний незнакомых нам технологий. Но мы фронтендеры и не хотим учить Java и Swift. Мы хотим React, CSS и в продакшен, и благодаря компании Facebook у нас есть всё, для того, чтобы реализовать наше желание.
В этой серии статей мы постараемся шаг за шагом разработать мобильное приложение DevSchacht на React Native и довести его до публикации.
Дисклеймер: автор не является профессиональным разработчиком на React Native. Советы, данные в статье, могут быть не оптимальны — но, как говорится, мы открыты для пул-реквестов :)
React Native — это фреймворк для разработки кроссплатформенных приложений. Он даёт возможность создавать и использовать компоненты точно так же, как обычно мы это делаем в React, вот только рендериться они будут не в HTML, а в нативные контролы операционной системы, под которую будет собрано наше приложение.
Итак, у нас есть знакомый JavaScript, JSX и CSS (на самом деле это полифил, реализующий подмножество CSS). C JavaScript есть некоторая неприятная особенность: и на Android, и на iOS ваш код будет исполнять движок JavaScriptCore (тот самый, который идёт в комплекте с WebKit). А вот отлаживать код в режиме дебаггера и запускать тесты вы будете в node.js и Chrome, то есть на движке V8.
- На симуляторах и устройствах iOS, эмуляторах и устройствах Android React Native использует JavaScriptCore. В iOS JavaScriptCore не использует JIT.
- При использовании дебаггера весь код запускается внутри среды отладки (например, в Chrome), общение с нативным кодом происходит через WebSocket. Таким образом, при отладке вы используете V8.
Сам я являюсь ярым поклонником WebStorm, это немного тяжеловесная и интерфейсно перегруженная, но потрясающе мощная и удобная IDE на основе IntelliJ IDEA от компании JetBrains. В настоящее время в неё неплохо интегрирован набор утилит для работы с React и React Native.
Когда возможностей WebStorm становится слишком много, а свободного ОЗУ в системе — слишком мало, я расчехляю старый добрый vim. В принципе, никто не запрещает использовать его с React Native, особенно если подключить подсветку JSX-синтаксиса.
Так же, можно дать шанс результату симбиоза Facebook и GitHub — редактору Nuclide. Этот редактор является набором расширений для Atom и позиционируется компанией Facebook как первоклассное решение для разработки на React Native. Честно говоря, в моём случае этот редактор оказался невероятно требователен к ресурсам и я отказался от его использования.
Для разработки нашего приложения воспользуемся заготовкой от Facebook — Create React Native App. Установить её не сложно:
К сожалению, если вы уже установили пятую версию npm, то ничего не получится. Либо ставьте четвёртую версию npm, либо попробуйте yarn — новый пакетный менеджер от Facebook, в котором всё отлично работает (что неудивительно).
Далее создаём каркас нашего будущего приложения:
В принципе, у нас уже есть всё для начала разработки. Однако стоит установить ещё пару полезных утилит, которые упростят нам жизнь в будущем.
Create React Native App поставляется вместе с Expo. Expo — это набор утилит, библиотек и сервисов, облегчающих разработку на React Native. Expo SDK позволяет обращаться к системной функциональности (такой как камера, контакты, локальное хранилище данных и так далее). Это значит, что вам не нужны Xcode или Android Studio и умение писать нативый код. А так же это значит, что благодаря этому слою абстракции, ваш код становится действительно кроссплатформенным.
Более того, вам даже не нужен XCode и симулятор iOS для запуска приложения, с помощью Expo приложение в режиме отладки можно запустить прямо на телефоне. Для этого на телефон нужно установить клиент Expo для iOS или Android.
Так же, для большего удобства разработки, рекомендую установить Expo XDE, существующий в версиях под MacOS, Windows и Linux.
And last but not the least (последний, но тоже важный): нам нужен хороший дебаггер. По умолчанию в качестве дебаггера открывается Google Chrome. Это неплохо, но недостаточно удобно. Есть сторонние дебаггеры, один из лучших это React Native Debugger.
Так как стандартный упаковщик (или packager — утилита, упаковывающая ваш JavaScript код в бандл) React Native запускается на порту 8081, а упаковщик Expo на порту 19001, то в дебаггере нужно указать этот порт.
Итак, всё готово, для того, чтобы попробовать запустить наше первое приложение. Нам надо выбрать, где мы запустим наше приложение. Так как я работаю на MacOS и у меня установлен XCode, то я выбираю симулятор.
Если у вас нет MacOS, то вы можете запустить приложение прямо на устройстве. Откройте клиент Expo и просканируйте QR-код, который выведется после запуска.
Вы должны увидеть на экране следующий текст
Открываем App.js и меняем
Сработает Hot Reload (горячая перезагрузка), и в приложении вы увидите «Привет, мир!».
Что тут происходит? Наш код шаблона выглядит как обычный HTML, но вместо веб-элементов, таких как <div> или <span> , мы используем React-компоненты. В данном случае <Text> является встроенным компонентом, отвечающим за отображение текста.
Этот код определяет новый компонент App . Все, что вы видите на экране - это набор компонентов. Компонент может быть довольно простым: единственное, что требуется, это функция рендеринга, возвращающая JSX. В следующий раз я покажу как можно писать компоненты в более компактном стиле.
Читайте также: