ReactNative projekt készítése Expo-val

Egy ReactNative projekt indítása talán a világ egyik legegyszerűbb dolga. A varázsszó: Expo. És mindössze két lépésből áll. Egy ún. fejlesztői környezet előkészítése, illetve magának a projektnek a létrehozása.

Ezeket nézzük meg kicsit közelebbről.

Fejlesztői környezet kialakítása (Expo telepítése)

Az egyszerűség kedvéért az Expo CLI-t érdemes használni, ami minden rendszeren fut. Az Expo fogja nekünk biztosítani azt a „hátteret”, környezetet, amiben és aminek segítségével ReactNative alkalmazásokat készíthetünk. Ha teljesen Expo által kezelt RN projektet készítünk, akkor az Expo kezesbárányként minden terhet levesz a vállunkról. Nem kell iOS vagy Android specifikus natív kódokat irkálni. Kizárólag JavaScript vagy TypeScript amit használnunk kell. És persze a React JSX szintaxisa.

Tehát az Expo-CLI telepítéséhez a parancssorban vagy terminálban ki kell adni az alábbi parancsot:

npm install -g expo-cli

Ezzel a gépünkre települ az expo CLI azaz expo „command line interface”.

React Native projekt készítése

Most már tudunk létrehozni React Native projektet az expo segítségével. Ennek több módja is van. Amikor én a ReactNative-al csak ismerkedni kezdtem, akkor ez volt a megfelelő parancs, ami még mindig használható:

expo init a-projektunk-neve --npm

Ezzel az aktuális könyvtárban az expo létrehoz nekünk egy alap projektet az npm paranccsal. Ezért is volt a parancs végén a kapcsoló (–npm). Egyébként a yarn csomagkezelőt használta volna. Az expo a projekt létrehozása előtt megkérdezi tőlünk, hogy milyen projektet hozzon létre. Választási lehetőségeket kínál. Én a legelső, blank lehetőséget szoktam kiválasztani.

Az Expo dokumentáció által javasolt legújabb módszer, amivel létrehozunk egy RN projektet, az a következő:

npx create-expo-app a-projektunk-neve

A doksi még azt is javasolja, hogy használható a –template kapcsoló, amivel kapunk egy listát a rendelkezésre álló template-ekről:

npx create-expo-app --template a-projektunk-neve

Projekt szerkesztése Visual Studio Code-al

A címből látszik, hogy én mit szoktam használni. Miután sikeresen létrehozta az expo CLI a React Native projektünket, bele kell menni a projekt könyvtárba, amit megadtunk előbb:

cd a-projektunk-neve

Enter ütése után belekerülünk a könyvtárba. Újabb konzol parancs és indul a VSCode:

code .

Ha van VSCode telepítve a gépünkön és helyesen bekerült az indító parancs a környezeti változók közé, akkor el kell indulnia a VSCode-nak és meg is kell nyílnia benne a projektünknek.

Egyébként, aki nem szeret sokat a konzolba írogatni, akkor simán indítsa (vagy előtte telepítse) el a VSCode-ot és ott is be tudja tölteni a projektet a File / Open Folder… menüpont segítségével.

Mobilapp / Projekt indítása

Az Expo az előzőekben nekünk egy működőképes mobilalkalmazást készített, amit el tudunk indítani és Android / iOS készüléken meg is tudunk nézni. Ha a VSCode-ban vagyunk, akkor nyissunk egy Terminált a Terminal menün keresztül, majd ott adjuk ki a következő parancsot:

npm start

Vagy, amit újabban az Expo doksi javasol:

npx expo start

Ez elindítja az ún. Development Server-t. Ez a terminálba generál nekünk egy QR kódot, amit majd a telóval be tudunk olvasni. Előtte azonban…

Expo Go mobilalkalmazás

Telepítenünk kell a mobilunkra az Expo Go mobilappot. Ha ez megvan, akkor iOS esetében a kamerával a QR kódot beolvasva azonnal elindul az Expo Go, ami futtatja a React Native alkalmazásuinkat. Andorid esetén előbb el kell indítani az Expo Go-t a telón, aztán a QR kód bescannelése linket kell választani. Elindul az Androidos teló kamerája és innentől kezdve ugyanaz a mutatvány, mint iOS-en.

Javasolt irodalmak

A hivatalos angol nyelvű doksija annak, amit leírtam, megtalálható itt: https://reactnative.dev/docs/environment-setup

Valamint itt ezen az oldalon is van egy Expo-val foglalkozó link gyűjtemény.