Завършете как да: създадете-реагирайте-native-приложение с Genymotion (Android емулатор) на Windows 10 в 10 стъпки

Винаги съм почитател на бързите ръководства за стартиране. Ето моят опит да помогна на онези, които търсят да настроят андроид емулатор, за да създадат нативните си приложения React с помощта на create-native-react-app и Genymotion в Windows 10.

В това ръководство предполагам, че хората започват от нулата. (свежа инсталация на Windows без зависимости)

Стъпка 1: Инсталирайте Node.js

Тъй като започваме от нулата, нека първо изтеглим Node.js Просто изтеглете LTS версията, за да бъдете от по-сигурната страна. Можете да го получите от тук:

Следвайте инструкциите за инсталиране (продължавайте да натискате Next), докато се появи диалоговият прозорец Finish.

След като сте готови, отворете командния ред (щракнете върху Старт -> въведете cmd и натиснете Enter) и въведете едно по едно:

възел -v
npm -v

ако и двете команди не върнат грешки, вие сте зададени за стъпка 2, нещо не е наред с вашата инсталация Node.js. Можете да отстраните неизправностите за това тук:

** Стъпка 2 (За сега): Намалете npm до v4.x.x

Към момента на писане на това ръководство. Поддръжката за npm @ 5 е бъги. Сигурен съм, че ще бъде поправен в близко бъдеще. Но засега това правите:

npm инсталирайте -g npm @ 4

Стъпка 3: Инсталирайте родното приложение create-react

След като вече имате Node.js и стартирате в командния ред следващия тип:

npm install -g create-react-native-app

и натиснете Enter.

Стъпка 4: Регистрирайте се на Genymotion

Преминете към https://www.genymotion.com/account/create/ и създайте акаунт.

Лично
За типа фирма избрах: Фрийлансъри и
за вида на използване избрах: Разработка

Стъпка 4: Изтеглете Genymotion

След като сте готови, трябва да бъдете отведени до страницата за изтегляне, ако не и сами там:

Изберете опцията с VirtualBox (ако нямате VirtualBox вече инсталиран на вашия компютър с Windows).

Стъпка 5: Добавяне на ново виртуално устройство в Genymotion

След като го изтеглите, отворете Genymotion и влезте с идентификационните данни, създадени в стъпка 3.
Сега ще можете да добавите ново виртуално устройство (Ctrl + N).

Изберете някой от списъка и щракнете върху Напред.

След като приключите, ще видите вашите устройства, изброени под Виртуални устройства:

Стъпка 6: Конфигуриране на променливи на околната среда и добавяне на път

Почти сме там! Не натискайте Start още, минимизирайте прозореца на Genymotion и щракнете с десния бутон върху този компютър (My Computer) -> Select Properties.

Потърсете Разширени системни настройки в левия панел и щракнете върху него.

Прозорецът на системните свойства трябва да се покаже. След това щракнете върху променливи на околната среда в долния десен ъгъл.

В прозореца с променлива среда, който се показва.
Под скобата на системните променливи изберете Path и щракнете върху Редактиране.

След това в прозореца за променлива среда на редактиране щракнете върху New -> добавяне на път C: \ Program Files \ Genymobile \ Genymotion \ tools -> щракнете върху OK, докато всички прозорци се затворят.

Стъпка 7: Стартиране на виртуалното устройство в Genymotion

След това възстановете предишния минимизиран прозорец на Genymotion и щракнете върху Старт.

Трябва да видите андроиден емулатор като този:

Стъпка 8: Създаване на „create-react-native-app“

След това отворете командния ред отново и отидете в директорията на вашите проекти и въведете:

създайте-реагирайте-native-app вашия страхотен проект

Стъпка 9: Изпълнение на „create-react-native-app“

Сега в командния ред въведете:

CD вашия страхотен проект
npm работи андроид

Стъпка 10: Дайте разрешение и Voila!

И накрая, дайте разрешение за изложение, когато видите този (или подобен) екран във вашето виртуално устройство.

И сте готови!

Надявам се това ръководство да ви е помогнало. Честито хакерство наистина!