< React Native

React Native - Expo kezdés

Szerző: Sallai András

Copyright © 2021, Sallai András

Szerkesztve: 2021, 2022

Licenc: CC BY-SA 4.0

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.

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:

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

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.

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

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:

„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

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

Ctrl + M

Parancssoros felületen:

m

Újratöltés

r