• Szerző: Sallai András
• Copyright © Sallai András, 2021, 2022
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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.

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.

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

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

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.

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

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:

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

{
	"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 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:

index.js

/**
 * @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.

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.

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.

App.js

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.

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.

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

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/