Игра около React Native — #2

За да научите основите за React Native, React и JSX, вижте предишната ми публикация по-долу.



Игра около React Native — #1 Основи на React & JSX
Разработването на мобилни приложения твърде трудно ли е? Ето React-Native с много по-лесен начин за създаване на собствени мобилни приложения…medium.com



React естествена среда може да бъде настроена в следните 5 прости стъпки. Изпълнете стъпките въз основа на вашите платформи (Windows, Linux и Mac).

Стъпка 1 — Инсталирайте NodeJs и react-native-cli

Изтеглете и инсталирайте NodeJs за всички платформи тук — https://nodejs.org/en

react-native-cli е пакет с възли, използван за създаване на празно приложение за react native. Трябва да инсталираме react-native-cli, използвайки „npm“ глобално за системата. За да направите това, изпълнете следните команди.

Linux и Mac

След като инсталирате NodeJs, отворете терминала и въведете тази команда в Mac и Linux, за да инсталирате react-native-cli.

sudo npm install -g react-native-cli

Забележка:Дайте парола за влизане в акаунта си, когато „sudo“ се използва в команда.

Windows

Отворете командния ред като администратор и изпълнете следната команда, за да инсталирате react-native-cli.

npm install -g react-native-cli

Стъпка 2 — Инсталиране на зависимости за Android

Изтеглете и инсталирайте Android Studio тук. Уверете се, че сте инсталирали SDK с SDK Manager.

След като инсталирате Android studio, отидете на SDK Manager, който е достъпен в „Настройки → Външен вид и поведение → Системни настройки → Android SDK“ и се уверете, че следните пакети са маркирани.

  • SDK за Android
  • Android SDK платформа
  • Производителност (Intel® HAXM)
  • Виртуално устройство с Android

а също така ще ви трябват някои основни пакети и платформи, така че проверете и тези елементи и щракнете върху бутона „Приложи“.

  • Android SDK платформа 27
  • API на Google Intel x86 Atom_64 System Image
  • След това изберете раздела „SDK Tools“ и поставете отметка в квадратчето до „Show Package Details“ и тук. Потърсете и разгънете записа „Android SDK Build-Tools“, след което се уверете, че е избрана 26.0.3.

Сега добавете променливите на пътя, за да стартирате емулатор, базиран на вашата платформа.

Mac

Редактирайте файла .bash_profile в домашната директория на потребителя. Можете да го отворите, като изпълните следната команда в терминала.

open $HOME/.bash_profile

Добавете следните редове в края на файла.

export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools

Linux

Редактирайте файла .bash_profile в домашната директория на потребителя. Можете да го отворите, като изпълните следната команда в терминала.

gedit $HOME/.bash_profile

Добавете следните редове в края на файла.

export ANDROID_HOME=$HOME/Android/Sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools

Windows

В Windows трябва да добавите вашия SDK път към Променливи на средата. Задайте името на променливата на ANDROID_HOMEи стойността на променливата на,

C:\Users\<your_username>\AppData\Local\Android\Sdk

Забележка:задайте ‹your_username› на вашето потребителско име в системата.

Стъпка 3 — Инсталиране на зависимости за iOS

Mac

За разработване на приложения за iOS ви е необходим Xcode и той може да бъде изтеглен от https://itunes.apple.com/in/app/xcode/id497799835.

Linux и Windows

Разработката на приложението за iOS изисква Xcode и не е достъпно за Linux и Windows. Така че тези платформи не се поддържат в момента.

Стъпка 4 — Създаване на React Native приложение

Настройката на средата е завършена. Сега нека опитаме да създадем естествено приложение за реакция.

Отидете до терминала (Linux и Mac) или командния ред (Windows) и въведете следната команда, за да създадете празен роден проект за реакция.

react-native init YourAwesomeProject

Забележка:Заменете ‹YourAwesomeProject› с името на вашия проект

Стъпка 5 — Стартиране на вашето страхотно приложение

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

Android

Тези команди ще разположат приложението ви в емулатор, наличен в Android Studio или физическо устройство, свързано чрез Android Debugging Bridge (ADB).

Забележка:За да използвате ADB, в телефон с android отидете на Settings→Developer Options→USB Debugging. Сега свържете устройството към компютъра чрез USB, за да използвате ADB.

cd YourAwesomeProject
react-native run-android

iOS

Забележка:Те ще работят само на Mac, тъй като никоя друга платформа не поддържа Xcode.

Тези команди ще разположат приложението в един от симулаторите, налични в Xcode.

cd YourAwesomeProject
react-native run-ios

Ако искате да стартирате приложението на определен симулатор като iPhone-x, тогава

cd YourAwesomeProject
react-native run-ios --simulator="iPhone X"

Ако горните команди са били успешни, резултатът ще бъде като,

Това е всичко, хора, вашата среда за реагиране е готова. Започнете да изграждате невероятните си идеи в мобилни приложения днес.

„Как да използваме react-native init от нулата“ е публикувано по-долу.



Игра около React Native — #3 Как да използваме „react-native init“ от нулата
Здравейте хора, тук ще започнем с нов проект за react native. Опитайте да използвате „react-native init“medium.com



Кажете Здравей, безплатно е. @matheswaaran_S или https://matheswaaran.com