[[oktatas:telefon:react_native|< React Native]]

====== React Native - Expo kezdés ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Bevezetés =====

Ebben a leírásban React Native projektet, az expo paranccsal kezeljük.

Az expo parancs telepítése:
  npm i -g expo-cli

Ellenőrizzük:
  expo --version


Dokumentáció:
  * https://docs.expo.dev/


Online fejlesztés:
  * https://snack.expo.dev/

Feltöltő hely:
  * https://expo.dev/

Az expo.dev webhelyre feltölthetjük projektjeinket. 

===== NodeJS =====

A webes megjelenítéshez 2022-12-22-én NodeJS 16.x szükséges.

A különböző verziók telepítése:
  * https://github.com/nodesource/distributions/blob/master/README.md
===== Kezdés =====

Projekt kezdése:

  expo init projekt01

A következőt látjuk:

<code>
? Choose a template: › - Use arrow-keys. Return to submit.
    ----- Managed workflow -----
❯   blank               a minimal app as clean as an empty canvas
    blank (TypeScript)  same as blank but with TypeScript configuration
    tabs (TypeScript)   several example screens and tabs using react-navigation and TypeScript
    ----- Bare workflow -----
    minimal             bare and minimal, just the essentials to get you started

</code>

Kezdésnek válasszuk az első **blank** lehetőséget.


Ha elkészült a kód, néhány lehetőséget kínál az expo:

<code>
cd porjekt01
yarn start
yarn android
yarn ios
yarn web
</code>

A yarn az npm parancs helyett ajánlott csomag és projekt-kezelő. Mindegy melyiket használjuk. Ebben a leírásban az npm parancsot használjuk.




Az indításhoz használjuk az expo start parancsot:

<code>
expo start
</code>

A "w" billentyűvel webes felületen megnézhetjük az alkalmazást.

===== Kezdés npx paranccsal =====

<code>
npx create-expo-app app01
npx expo install react-native-web@~0.18.10 react-dom@18.2.0
npx expo install @expo/webpack-config@^18.0.1
</code>

===== Alapkód =====

Ha nem vagyunk a projekt könyvtárában, akkor lépjünk be, majd indítsuk el a szerkesztőt, ami most Visual Studio Code:

  code .

A következőket látjuk:

<code>
projekt01/
  |-.expo-shared/
  |-assets/
  |-node_modules/
  |-.gitignore
  |-App.js
  |-app.json
  |-babel.config.js
  |-package-lock.json
  `-package.json
</code>


Az App.js tartalmazza az alapkomponenseket.

<code javascript App.js>
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
</code>

Van egy függvényünk és egy objektumunk:
  * App()
  * styles
===== Metro Bundler =====

A Metro Bundler fogjuk használni a projekt kezeléséhez. 

Indítsunk egy terminálablakot, majd:
  npm start


A terminálban a következőket láthatjuk:

<code>
 › Waiting on exp://192.168.5.5:19000
 › Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

 › Press a │ open Android
 › Press w │ open web

 › Press r │ reload app
 › Press m │ toggle menu
 › Press d │ show developer tools
 › shift+d │ toggle auto opening developer tools on startup (enabled)

 › Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
</code>

Láthatjuk milyen billentyűkombinációkkal indíthatunk feladatokat.


===== Android emulátor futtatása =====
==== Kezelés Android Studio-ból ====

Az Android Studio-val telepített emulátort fogjuk használni. Az emulátort indítását megtehetjük
parancssorból is, ha útvonalba van az emulator parancs, vagy indíthatjuk az Visual Studio kód
ablakából. Ha kevés a memóriánk indítsuk inkább parancssorból. 

A következőkben Android Studio-val készítünk egy új emulátort. Ha az Android Studio-ban egyetlen 
projekt sincs megnyitva, a "Configure" eszköz, ebben az esetben is elérhető. Ha már van virtuális 
eszközünk, ezt a lépést kihagyhatjuk, csak indítsuk el az emulátort. 

Az Android Studio induló ablakában válasszuk újra 
a **Configure** legördülő listadobozt, azon belül az
**AVD Manager** elemet.

Az előugró ablakban van egy gomb, amivel virtuális
eszközöket készíthetünk. 

  [ + Create Virtual Device... ]

Válasszuk például a Phone > Pixel 3a-t.
Ezt követően válasszuk a "Next" gombot.
A Release Name mezőben Válasszuk ki az
Android verziót, és kattintsunk a "Download"
linkre, mire az letölti a hozzátartozó képfájlt.

A következő képernyőn adjunk nevet a konfigurációnak,
az "ADV Name" után.

  Pixel 3a API 29

Kattintsunk a "Finsih"-re.

Menjünk vissza a Metro Bundler-re. 
Ott az indítási lehetőség:
  * "Run on Android device/emulator"

Kattintsunk rá.
Menjünk vissza a terminálablakba.

Megjelenik az emulátorban a Helló Világ.
Mentésre, látszik az eredmény az emulátorban.

==== Parancssorból ====

Útvonalba kell lennie az **emulator** parancsnak.

Listázzuk az elérhető eszközöket:
  emulator -list-avds

Indítsuk el a kiválasztott emulátort:
  emulator @Pixel_3a_API_30_x86

A @ után írjuk a telefonemulátor nevét.

Vagy így is lehet:
  emulator -avd Pixel_3a_API_30_x86

Parancssorból futtatva minimális memóriafoglalás: 2,2 GB.


===== Futtatás fizikai eszközön =====

iPhone-ra és Androidra elérhető egy **expo-client** nevű alkalmazás. Telepítsük a fizikai eszközre (telefonra).

  * https://expo.dev/client


Android vagy iOS-en a következő lépések szükségesek:

  * Telepítsük az **expo-client** alkalmazást. 
  * Gondoskodjunk arról, hogy legyünk benne a **helyi hálózatban**. 
    * Például, kapcsoljuk be a wifi-t, ha nincs bekapcsolva.
  * Indítás után kapunk egy **QR kód** olvasót. 
  * A **Metro Bunlder** webes felületén, a bal alsó sarokban található QR kódot olvassuk be.
    * A CONNECTION marad az alapértelmezett: "LAN" 



===== Fejlesztői menü =====

Emulátorban és fizikai eszközön futtatva kapunk az eszközön egy fejlesztői menüt is.
A fejlesztőmenü elérhető a következő billentyűkombinációval:
  * Ctrl + M

{{:oktatas:telefon:react_native:expo_fejlesztoi_menu.png?200|}}

A fejlesztői menüből is kérhető az alkalmazás újratöltése, a "Reload" lehetőséget választva.

===== Gyors kezdés =====


  npm install -g expo-cli


  expo init Projekt01
  cd Projekt01
  npm start

Az npm start helyett lehet ez is: 
  expo start

===== .gitignore =====

Van egy előre legyártott .gitignore fájl, ebbe vegyük még fel:
<code>
#...
.expo-shared
</code>

===== Metro Bundler =====
==== Fejlesztői menü ====

Ha szimulátorban futtatunk egy alkalmazást egy fejlesztői felület is rendelkezésre áll.

A szimulátorban billentyűkombinációval kapcsolható:
  * Ctrl + M

Parancssoros felületen:
  * m

==== Újratöltés ====

  * r