• Szerző: Sallai András
• Copyright © 2021, Sallai András
• Szerkesztve: 2021, 2022
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

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.

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

A különböző verziók telepítése:

• https://github.com/nodesource/distributions/blob/master/README.md

Projekt kezdése:

expo init projekt01

A következőt látjuk:

? 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

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:

cd porjekt01
yarn start
yarn android
yarn ios
yarn web

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:

expo start

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

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

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:

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

Az App.js tartalmazza az alapkomponenseket.

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',
  },
});

Van egy függvényünk és egy objektumunk:

• App()
• styles

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:

 › 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.

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

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.

Ú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.

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”

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

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

npm install -g expo-cli

expo init Projekt01
cd Projekt01
npm start

Az npm start helyett lehet ez is:

expo start

Van egy előre legyártott .gitignore fájl, ebbe vegyük még fel:

#...
.expo-shared

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

• r