3. diel - React Native - TODO aplikácie

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:

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:

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.

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:

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 budúcej lekcii, Komponenty , si povieme o základných komponentoch v React Native a vytvoríme si jednu vlastnú.