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

<code javascript>

{/* megjegyzés */}


</code>

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

<code javascript>
import { View, Text } from 'react-native';
</code>

A Text is bekerült az import sorba, mivel azt is használni fogjuk. 

<code javascript>
    <View>
        <Text>Helló Világ!</Text>
    </View>
</code>

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:
<code javascript>
import { StyleSheet, Text, View, Image } from 'react-native';
</code>

A komponensnek a source attribútumában adjuk meg a megjelenítendő képet.
<code javascript>
<Image 
    source={require('./assets/icon.png')}
    style={{width: 40, height: 40 }}
/>
</code>

<code javascript>
<Image 
    source={require('./assets/vmi.jpg')} 
    style={{width: 40, height: 40 }}    
/>
</code>

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:
<code javascript>
         <Image 
          source={{uri: 'https://picsum.photos/200/300'}}
          style={{
            width: 200,
            height: 300,
          }} />
</code>

vagy:

<code javascript>
      <Image source={{
        width: 200,
        height: 300,
        uri: "https://picsum.photos/200/300",
      }} />
</code>





A teljes kód:
<code javascript App.js>
import React from 'react';
import { Image, View, StyleSheet } from 'react-native';

export default () => {
  return (
    <View style={styles.container}>
      <Image source={{
        width: 200,
        height: 300,
        uri: "https://picsum.photos/200/300",
      }} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
</code>

Még egy példa:

<code javascript>
<Image 
    source={{
        uri: require('./assets/check.png'),
        width: 40,
        height: 40,          
    }}          
/>
</code>


===== TextInput =====

Bevitelhez használjuk a TextInput komponenst. 
Importáljuk, majd helyezzük el.

<code javascript>
import React from 'react';
import {  StyleSheet, Text, TextInput, View } from 'react-native';

export default function App() {
  const [text, onChangeText] = React.useState('');
  return (
    <View style={styles.container}>
      <Text>Szám</Text>
      <TextInput 
        style={styles.input} 
        onChangeText={text => onChangeText(text)}
        />
      <Text>{text}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {    
    borderColor: 'blue',
    borderWidth: 1,
    backgroundColor: 'lightblue',
    width: '80%',
  },
});

</code>

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

<code javascript>
        <TextInput 
          secureTextEntry={true}
        />
</code>


<code javascript>
        <TextInput 
          secureTextEntry={true}
          placeholder='jelszó'
          placeholderTextColor='#888'
          style={{
            width: '95%', 
            backgroundColor: 'white',
            marginTop: 10,
          }}
        />
</code>

===== ScrollView =====

A ScrollView egy csomagoló komponens. 

A ScrollView-nek korlátozott magasságú konténerben kell lennie, mivel
korlátlan magasságú tartalma van.

<code javascript>
import React from 'react';
import { ScrollView, StyleSheet, Text,View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Cím</Text>
      <ScrollView style={styles.content}>
        
        <Text style={styles.middle}>
          Sunt veniam nulla consequat quis est dolor ut occaecat.
          Ullamco voluptate culpa veniam cupidatat. 
        </Text>
      </ScrollView>
    </View>
  );
}

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',
  }
});
</code>

===== Vizuális komponensek =====
  * Button
  * Switch

===== Button =====

<code javascript>
import { StyleSheet, View, Button } from 'react-native';
</code>

<code javascript>
    <View style={styles.container}>
      <Button title='Nyomd meg'/>
    </View>
</code>

Eseménykezelés:
<code html>
      <Button 
        title='Nyomd meg'
        onPress={() => alert('Üdvözlet')}
        />
</code>


A teljeskód:
<code javascript>
import React from 'react';
import {  Button, StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Button 
        title='Nyomd meg'
        onPress={() => alert('Üdvözlet')}
        />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

</code>


Alert osztály:

<code javascript>
import {  Button, StyleSheet, View, Alert } from 'react-native';
</code>

<code html>
      <Button 
        title='Nyomd meg'
        onPress={() => Alert.alert('Üdvözlet')}
        />
</code>

===== Switch =====

<code javascript>
import { useState } from "react";
import { Switch } from 'react-native';
</code>


<code javascript>
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(
    previousState => !previousState);
</code>

<code javascript>
      <Switch
        onValueChange={toggleSwitch}
        value={isEnabled}
        style={{ transform: [{ scaleX: 2.8}, { scaleY: 2.8 }] }}

        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        />
</code>


Teljeskód:

<code javascript App.js>
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 (
    <View style={styles.container}>
      <Switch
        onValueChange={toggleSwitch}
        value={isEnabled}
        style={{ transform: [{ scaleX: 2.8}, { scaleY: 2.8 }] }}

        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

</code>


===== FlatList =====

<code javascript App.js>
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 }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

export default function App() {
  
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <View style={styles.container}>
      <FlatList 
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        style={styles.list}
      />
    </View>
  );
}

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%',
  },
});

</code>