[[oktatas:telefon:react_native|< React Native]]
====== React Native alap komponensek ======
* **Szerző:** Sallai András
* Copyright (c) Sallai András, 2021, 2023
* Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
* Web: https://szit.hu
===== Megjegyzés =====
{/* megjegyzés */}
===== Komponensek =====
A React Native fejlesztői szerint az alapkomponensek a következők:
* View
* Text
* Image
* TextInput
* ScrollView
* StyleSheet
==== User Interface ====
* Button
* Switch
==== List Views ====
* FlatList
* SectionList
==== Egyéb ====
* ActivityIndicator
* Alert
* Animated
* Dimensions
* KeyboardAvoidingView
* Linking
* Modal
* PixelRatio
* RefreshControl
* StatusBar
==== Több információ ====
* https://reactnative.dev/docs/components-and-apis
===== Nézet =====
A komponenseket mindig valamilyen nézetbe, azaz egy konténer komponensbe helyezzük el.
A konténer típusú komponens például a View, a többi általában View-ra végződik.
A View komponenst használat előtt importálni szükséges:
import { View, Text } from 'react-native';
A Text is bekerült az import sorba, mivel azt is használni fogjuk.
Helló Világ!
A szöveg megjelenítéshez szükség van a Text komponensre.
===== Képek =====
Vegyük fel egy új importálandó osztályt:
* Image
A statikus fájlokat, mint a képek, egy assets nevű könyvtárban szokás tárolni, ami a projekt gyökér könyvtárából nyílik.
Importáljuk az Image komponenst:
import { StyleSheet, Text, View, Image } from 'react-native';
A komponensnek a source attribútumában adjuk meg a megjelenítendő képet.
2024-01-21-én a [[https://reactnative.dev/docs/images|dokumentáció]] szerint a szélesség és magasság megadása
csak url használata esetén szükséges. Azonban lokális fájlrendszerről
betöltött képek is csak így jelennek meg.
Használjunk képet innen:
* https://picsum.photos
A következő példában az Internetről használunk egy képet, megadva a
szélességet és magasságot is:
vagy:
A teljes kód:
import React from 'react';
import { Image, View, StyleSheet } from 'react-native';
export default () => {
return (
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Még egy példa:
===== TextInput =====
Bevitelhez használjuk a TextInput komponenst.
Importáljuk, majd helyezzük el.
import React from 'react';
import { StyleSheet, Text, TextInput, View } from 'react-native';
export default function App() {
const [text, onChangeText] = React.useState('');
return (
Szám
onChangeText(text)}
/>
{text}
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
input: {
borderColor: 'blue',
borderWidth: 1,
backgroundColor: 'lightblue',
width: '80%',
},
});
Figyeljük meg, hogy a TextInput komponens számára két attribútumot állítottam be:
* style
* onChangeText
A style értékében adom meg, hol van beállítva stílus.
A onChangeText egy eseménykezelő. Megmondom mi történjen ha szöveg változik a beviteli mezőben.
A TextInput API-ja:
* https://reactnative.dev/docs/textinput
==== Jelszó beírása ====
===== ScrollView =====
A **ScrollView** egy csomagoló komponens. A ScrollView lehet gyermekelem is.
A ScrollView-nek korlátozott magasságú konténerben kell lennie, mivel
korlátlan magasságú tartalma van.
import React from 'react';
import { ScrollView, StyleSheet, Text,View } from 'react-native';
export default function App() {
return (
Cím
Sunt veniam nulla consequat quis est dolor ut occaecat.
Ullamco voluptate culpa veniam cupidatat.
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
content: {
margin: 20,
},
middle: {
fontSize: 50,
},
title: {
fontSize: 64,
backgroundColor: 'blue',
color: 'white',
}
});
===== Vizuális komponensek =====
* Button
* Switch
===== Button =====
import { StyleSheet, View, Button } from 'react-native';
Eseménykezelés:
A teljeskód:
import React from 'react';
import { Button, StyleSheet, View } from 'react-native';
export default function App() {
return (
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Alert osztály:
import { Button, StyleSheet, View, Alert } from 'react-native';
===== Switch =====
import { useState } from "react";
import { Switch } from 'react-native';
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(
previousState => !previousState);
Teljeskód:
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { useState } from "react";
import { Switch } from 'react-native';
export default function App() {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(
previousState => !previousState);
return (
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
===== FlatList =====
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { FlatList, Text } from "react-native";
const DATA = [
{ id: '1', title: 'Alma' },
{ id: '2', title: 'Körte' },
];
const Item = ({ title }) => (
{title}
);
export default function App() {
const renderItem = ({ item }) => (
);
return (
item.id}
style={styles.list}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
item: {
padding: 10,
backgroundColor: '#005588',
},
title: {
color: 'white',
fontSize: 32,
},
list: {
width: '100%',
},
});