Tartalomjegyzék

< React Native

React Native - Expo kezdés

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ó:

Online fejlesztés:

Feltöltő hely:

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

Node.js

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:

Kezdés

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.

Kezdés npx paranccsal

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

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: 

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:

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: 

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

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:

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

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

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:

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: 

#...
.expo-shared

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ó:

Parancssoros felületen:

Újratöltés