React Native – Tworzenie projektu cz.2 – Instalacja emulatora (Projekt z Expo)

Słowa wstępu

Po jakimś czasie używania smartfona jako narzędzia do debugowania, można zadać sobie pytanie, jak będzie wyglądała nasza aplikacja na innych urządzeniach? Kodując aplikacje mobilne jak i webowe musimy wziąć pod uwagę że każde urządzenie może mieć inne parametry, np. inną rozdzielczość, inną wersje androida. Do przetestowania aplikacji na innym sprzęcie, przyda nam się emulator. Dzięki niemu będziemy mogli emulować dowolne urządzenie z dowolnym systemem.

Jeśli nie chcesz używać emulatora zapraszam tutaj.

Co nam będzie potrzebne?

• Node.js
• Python2
• Java Development Kit (zalecane w wersji 8)
• Android Studio

Instalacja

Na początek zainstalujmy Node.js, Python2 i JDK, nie jest to skomplikowane więc pominę szczegóły instalacji.

Kiedy będziemy mieli zainstalowane powyższe narzędzia, możemy przejść do instalacji Android Studio. Włączamy instalator, gdy zapyta nas o typ instalacji, wybieramy Custom i upewniamy się że poniższe opcje są zaznaczone:

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)
• Android Virtual Device

Gdy uruchomimy Android Studio, powinien pojawić się nam ekran powitalny, wybieramy utwórz nowy projekt. Po utworzeniu projektu w lewym górnym rogu wybieramy File->Settings->Appearance & Behavior->System Settings->Android Sdk. W zakładce SDK Platforms zaznaczamy w prawym dolnym rogu 'Show Package Details’ i szukamy Android 6.0 (Marshmallow), następnie zaznaczamy na liście:

• Google APIs
• Android SDK Platform 23
• Intel x86 Atom_64 System Image
• Google APIs Intel x86 Atom_64 System Image

Przechodzimy do zakładki SDK Tools i również odhaczamy 'Show Package Details’, na liście szukamy i zaznaczamy:

• 23.0.1

Gdy już będziemy mieli wszystko wybrane, klikamy 'Apply’ i potwierdzamy klikając OK.

Następnym krokiem jest dodanie zmiennej środowiskowej, wskazującej na Android SDK. Ten krok może się różnić w zależności od używanego systemu, zmienna musi przyjąć nazwę ANDROID_HOME, a ścieżka do niej ma postać:

c:\Users\Nazwa_użytkownika\AppData\Local\Android\Sdk

Dokładną ścieżkę możesz znaleźć w File->Settings->Appearance & Behavior->System Settings->Android Sdk.

Tworzenie wirtualnej maszyny

Aby stworzyć wirtualną maszynę, czyli nasz emulator, klikamy ikonkę wskazującą na 'AVD Manager’

Następnie klikamy 'Create Virtual Device’ wybieramy z listy dowolne urządzenie, przechodzimy dalej i w następnej zakładce wybieramy Marshmallow 23 x86_64, przechodzimy dalej i wybieramy finish.

Mamy już stworzony emulator. Teraz możemy go uruchomić wybierając z listy zielony przycisk. Aby uruchomić projekt w wirtualnym urządzeniu, musimy przejść do konsoli w folderze naszego projektu i wpisać:

npm start

Gdy w konsoli pojawi się menu, wybieramy 'a’ na klawiaturze. W tym momencie powinniśmy zobaczyć nasz projekt, na ekranie emulatora.

Oryginalny tutorial możecie znaleźć na oficjalnej stronie React Native.