< React Native

React Native - Kezdés react-native

Szerző: Sallai András

Copyright © Sallai András, 2021, 2022

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Bevezetés

Ha React Native alkalmazást szeretnénk készíteni két projektkezelő paranccsal dolgozhatunk:

expo

react-native

Itt most az utóbbit fogjuk használni.

A react-native-cli parancs

Ha korábban telepítve volt a react-native-cli távolsítsuk el:

Ha nincs telepítve, telepítsük:

npm uninstall -g react-native-cli

Projekt létrehozására az npx parancsot fogjuk használni, ami alapértelmezetten támogatja a react-native csomag létrehozását.

Emulátor indítása

Parancssorból

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.

A react-native parancs

A projekt kezelését a react-native paranccsal fogjuk elvégezni.

A react-native paranccsal szemben az Expo egyik előnye, hogy van hova feltölteni a fejlesztői változatunkat, a Google Play-en publikálás nélkül. Így mások és kipróbálhatják a programunkat, még közzététel előtt.

Ha expo nélkül dolgozunk a fejlesztői változatok számára, egy lehetséges feltöltőhely:

https://appcenter.ms/ (2021)

https://github.com/Microsoft/react-native-code-push

Projekt

Új projekt:

npx react-native init app01

Ha elkészült a projekt, lépjünk be a könyvtárba, majd indítsuk el a Metro-t:

npx react-native start

A Metro nem adja vissza a várakozási jelet (prompt), addig fut, amíg Ctrl+C billentyűkombinációval meg nem szakítjuk.

Ha fut a Metro, indítsuk el az alkalmazást:

npx react-native run-android

Az új projekt tartalmaz egy sablon alkalmazást. Indítás után ez megjelenik.

Helyi parancs használata

Ha nem tudunk globálisan telepíteni, mondjuk jogosultság miatt, a helyi projektbe is telepíthető a a react-native csomag. Az indítása ekkor az npx paranccsal történik.

Ha van globálisan telepítve react-native parancs, de mi helyben, a projekt könyvtárába telepített react-native parancsot szeretnénk helyette használni, érdemes törölni a globálisan telepített verziót, mert problémákat okozhat.

A Metro indítása helyben telepített react-native paranccsal:

npx react-native start

Ha fut a Metro, indítsuk el az alkalmazást:

npx react-native run-android

Kódszerkesztő

Tetszőleges kódszerkesztőt használhatunk. Itt most Visual Sutudo Code kódszerkesztővel dolgozunk.

Ha futtattuk az react-native init parancsot, a többi parancsot (Metro indítása, alkalmazás indítása), futtathatjuk a VSCode termináljából is.

VSCode

A VSCode ESLint bővítménye nem ajánlja több sorba írni a kódot, pedig néhol szükséges.

ESLint - tiltva

VSCode snippets

A VSCode bővítményei között van olyan, amelyik tud beszúrni már kész kezdő forráskódot. Használhatjuk azokat is, de azok általában osztályokkal dolgoznak. Mi most készítünk egy forráskódot, amely függvénnyel dolgozik.

Egy felhasználói snippet bejegyzést fogunk készíteni:

File > Preferences > User Snippets

Kiválasztjuk a JavaScript nyelvet

Létrejön egy javascript.json fájl a következő útvonalon:

~/.config/Code/User/snippets/javascript.json

Tartalma legyen:

{ "React Native komponens": { "prefix": "rns", "body": [ "import React from 'react';", "import {Text, View, StyleSheet} from 'react-native';\n", "export default () => {", "\treturn (", "\t\t<View style={styles.container}>", "\t\t\t<Text>Tartalom</Text>", "\t\t</View>", "\t);", "}\n", "const styles = StyleSheet.create({", "\tcontainer: {", "\t\tflex: 1,", "\t\tbackgroundColor: '#fff',", "\t\talignItems: 'center',", "\t\tjustifyContent: 'center',", "\t},", "});" ], "description": "React Native komponens beszúrása" } }

A kódot javítsuk ahogy szeretnénk. A forráskód beszúrásához írjuk a szerkesztőbe: rns. Erre megjelenik egy lista, amiből válasszuk a következőt:

rns React Native Komponens

A következő kódot kapjuk:

import React from 'react'; import { Text, View, StyleSheet } from 'react-native'; export default () => { return ( <View style={styles.container}> <Text>Tartalom</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });

A program állományai

A program belépési pontja az index.js. Itt van regisztrálva az App függvény ami az App.js fájlban van leírva.

Az index.js tartalma:

/** * @format */ import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App);

Az App.js fájlban található egy sablon, mi indítható React Native program.

App.js

Az App.js fájlt tartalmát törölhetjük és elkezdhetjük saját alkalmazásunk írását.

Ha beállítottuk a fentebb leírt rns snippet-t, az üres szerkesztő ablakba gépeljük be, majd válasszuk:

rns React Native komponens

Ha nincs beállítva a snippet, írjuk be szerkesztőbe:

import React from 'react'; import { Text, View, StyleSheet } from 'react-native'; export default () => { return ( <View style={styles.container}> <Text>Tartalom</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });

Próbáljunk meg változtatni a beállításokon. Tegyünk be újabb Text komponenst.

Munka osztállyal

Az eddigi példákban függvényt hoztunk létre a munka elkezdéséhez. Dolgozhatunk osztállyal is. Keressük meg az alábbi példában mit változtattunk az osztály használatához.

import React, { Component} from 'react'; import { View, StyleSheet, Text } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.container}> <Text>Helló Világ</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });

Importáltuk a Component osztályt.

Az export parancs most egy App osztályt exportál.

Egy render függvény törzsébe került a return.

Metro

Minden mentéskor automatikusan újratöltődik az alkalmazás az emulátorban.

A Metro lehetővé teszi az alkalmazás újratöltését a „r” billentyűvel. Ehhez kattintsunk a terminálba, ahol indítottuk.

Konzol

A console.log() vagy console.debug() függvények kimenete megtekinthető a Metro felületén.

Linkek

Ha szeretne expo nélkül dolgozni, látogassa meg az alábbi linkek valamelyikét:

https://reactnative.dev/docs/getting-started (2021)

https://dev.to/shivams136/create-react-native-app-for-android-ios-and-web-without-expo-48lc (2021)

https://www.developers-zone.com/start-react-native-without-expo/ (2021)

https://apiko.com/blog/expo-vs-vanilla-react-native/