Tartalomjegyzék

< React Native

React Native alap komponensek

Megjegyzés

{/* megjegyzés */}

Komponensek

A React Native fejlesztői szerint az alapkomponensek a következők:

User Interface

List Views

Egyéb

Több információ

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. 

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

A szöveg megjelenítéshez szükség van a Text komponensre.

Képek

Vegyük fel egy új importálandó osztályt:

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. 

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

2024-01-21-én a 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:

A következő példában az Internetről használunk egy képet, megadva a szélességet és magasságot is: 

         <Image 
          source={{uri: 'https://picsum.photos/200/300'}}
          style={{
            width: 200,
            height: 300,
          }} />

vagy: 

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

A teljes kód:

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

Még egy példa: 

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

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

Figyeljük meg, hogy a TextInput komponens számára két attribútumot állítottam be:

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:

Jelszó beírása

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

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

Vizuális komponensek

Button

import { StyleSheet, View, Button } from 'react-native';
    <View style={styles.container}>
      <Button title='Nyomd meg'/>
    </View>

Eseménykezelés: 

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

A teljeskód: 

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

Alert osztály: 

import {  Button, StyleSheet, View, Alert } from 'react-native';
      <Button 
        title='Nyomd meg'
        onPress={() => Alert.alert('Üdvözlet')}
        />

Switch

import { useState } from "react";
import { Switch } from 'react-native';
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(
    previousState => !previousState);
      <Switch
        onValueChange={toggleSwitch}
        value={isEnabled}
        style={{ transform: [{ scaleX: 2.8}, { scaleY: 2.8 }] }}
 
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        />

Teljeskód:

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

FlatList

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