Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP
Discount week - April - 30

3. diel - React Native - TODO aplikácie Nové

V minulej lekcii, React Native - Prvá aplikácia , sme si nainštalovali Expo CLI a vytvorili našej prvej aplikácii.

V dnešnej lekcii si vytvoríme TODO aplikáciu. Naučíme sa používať natívne komponenty. Tiež si vytvoríme vlastné komponenty, ktoré si upravíme pomocou štýlov. Výsledná aplikácia bude vyzerať nejako takto:

Náhľad výslednej aplikácie

Vytvorenie projektu

Prejdeme do zložky, v ktorej si chceme vytvoriť náš projekt a otvoríme si konzolu. Môžeme tak urobiť kliknutím pravým tlačidlom myši spolu s klávesom Shift:

otvorenie konzoly

Vytvoríme si teda nový projekt pomocou príkazu:

$ expo init TodoApp

Vyberieme možnosť Managed Blank projekt. Teraz sa presunieme do zložky a spustíme si projekt:

$ cd TodoApp
$ expo start

Teraz si môžeme spustiť aplikáciu na našom zariadení.

Základnú funkčnosť aplikácie

Otvoríme si súbor App.js a pridáme si textový input pre naše TODO.

Importujeme si teda potrebné komponenty:

import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

Importovali sme si hook useState a komponenty TextInput a Button.

Teraz si vytvoríme stavové premenné:

export default function App() {
    const [enteredText, setEnteredText] = useState("");
    const taskInputHandler = (enteredText) => {
      setEnteredText(enteredText);
    };
    const handleAddTodo = () => {
      console.log(enteredText);
      setEnteredText("");
    };
}

Premenná enteredText nám bude slúžiť na ukladanie textu z nášho inputu. Funkcia taskInputHandler(), nám bude ukladať dáta z inputu do tejto premennej a funkcie handleAddTodo() nám bude vytvárať naše TODO. Aktuálne vypíše obsah enteredText a vynuluje.

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

Teraz si upravíme JSX:

export default function App() {
    ...
    return (
      <View style = { styles.container } >
        <TextInput placeholder = "Task description"
          onChangeText = { taskInputHandler }
          value = { enteredText }
        />

        <Button title = "Add"
        onPress = { handleAddTodo }
        />

      </View>
    );
}

Pridali sme si komponent TextInput, ktorý slúži na vstup od užívateľa. onChangeText sa volá zakaždým keď sa text v inputu zmení. Vtedy si uložíme vstup od užívateľa do našej premennej enteredText. Value nastavujeme hodnotu našej premennej. Je to potrebné, pretože každá zmena stavu spôsobí rerender. Tým pádom by sa po každom zmene enteredText nastavil input na prázdny reťazec. Týmto teda zabezpečíme, že input zostane po renderu rovnaký.

Ďalej sme si pridali komponent Button. Po kliknutí na tlačidlo sa nám náš text vypíše na obrazovku a vynuluje náš input.

Teraz si môžeme pustiť našu aplikáciu a uvidíme nasledujúce obrazovku:

Teraz keď funguje input budeme si môcť naše TODO 's ukladať.

Vytvorme si teda pole, do ktorého si ich budeme ukladať:

const [taskArray, setTaskArray] = useState([]);

Teraz si upravíme našej funkciu handleAddTodo():

const handleAddTodo = () => {
  if (enteredText.length < 1) {
    return;
  }
  var task = {
    id: Math.random().toString(16).slice(-5),
    finished: false,
    description: enteredText
  }
  setTaskArray(tasks => [...tasks, task]);
  setEnteredText("");
}

Najskôr si overíme, že používateľ zadal TODO. Ďalej si vytvoríme jednoduchý objekt task, ktorý obsahuje id. To budeme potrebovať pri vykresľovaní listu, aby komponenta vedela, ako rozlíšiť jednotlivé tasky. Ďalej máme premennú finished, ktorá značí, či daný task je hotový a ako posledný je premenná description, ktorá obsahuje naše TODO.

Nakoniec pridáme náš novo vytvorený task do nášho poľa. Využívame takzvaný spread operátor, ten nám "rozloží" našej existujúce poľa do nového poľa a ďalej tam pridáme náš nový task. Viac o spread operátora si môžete prečítať tu.

Dvakrát za sebou sme nastavili nový stav, pre aplikáciu to neznamená, že sa 2x prekreslí. React Native tieto useState premenné upraví naraz a tým pádom sa aplikácia prekreslí len raz.

Teraz si poďme naše TODO 's vykresliť. Vytvoríme si teda novú funkciu:

const renderTaskItem = ({ item }) => {
  return (
    <Text>{item.description}</Text>
  )
}

Tá ako input dostane náš task objekt a vráti JSX kód vykresľujúca danej TODO. Importujeme komponent FlatList:

import { StyleSheet, Text, View, TextInput, Button, FlatList } from 'react-native';

Teraz si môžeme vykresliť naše TODO 's:

return (
      ...
      <FlatList
        renderItem={renderTaskItem}
        data={taskArray}
        keyExtractor={(item) => item.id}
      />

    </View>
  );
}

FlatList má niekoľko atribútov. My využijeme renderItem, ktorý slúži na vykreslenie jednotlivých položiek. Ďalej špecifikujeme dáta, ktoré má FlatList vykresľovať. Ako posledný musíme komponente FlatList dať vedieť, ktorá časť nášho objektu je unikátny kľúč. K tomu slúži prop keyExtractor. V našom prípade je to teda id.

Ešte predtým, než aplikáciu spustíme, si pridáme štýl padding do nášho view. Upravme si teda náš Stylesheet objekt:

const styles = StyleSheet.create({
  container: {
    padding: 50,
  },
});

Po spustení a zadaní pár TODO, bude naša aplikácia vyzerať nasledovne:

Jednoduché todo

Teraz si aplikáciu rozdelíme na komponenty. Vytvoríme si súbor ./components/TodoItem.js.

Importujeme si do neho potrebné komponenty:

import React from 'react'
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'

Teraz si vytvoríme našu komponent:

const TodoItem = (props) => {
    return (
        <Text>Hello World</Text>
    );
}

export default TodoItem;

Ako je možné vidieť, využívame v tejto komponente parameter props. Ten obsahuje všetky informácie o tejto komponente. Napríklad všetky atribúty a tým si môžeme nadefinovať komponenty.

Pre túto lekciu je to dnes všetko. Zvyšok aplikácie si dokončíme v ďalšej lekcii.

V ďalšej lekcii, React Native - Dokončenie TODO aplikácie , si vytvoríme nové komponenty na pridávanie Todos a ich zobrazenie a celú aplikáciu tak dokončíme.


 

Predchádzajúci článok
React Native - Prvá aplikácia
Všetky články v sekcii
React Native
Článok pre vás napísal Jakub Gabčo
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Aktivity (1)

 

 

Komentáre

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!