Lekce 3 - React Native - TODO aplikace

V minulé lekci, React Native - První aplikace, jsme si nainstalovali Expo CLI a vytvořili naší první aplikaci.

V dnešní lekci si vytvoříme TODO aplikaci. Naučíme se používat nativní komponenty. Také si vytvoříme vlastní komponenty, které si upravíme pomocí stylů. Výslední aplikace bude vypadat nějak takto:

Vytvoření projektu

Přejdeme do složky, ve které si chceme vytvořit náš projekt a otevřeme si konzoli. Můžeme tak učinit kliknutím pravým tlačítkem myši spolu s klávesou Shift:

Vytvoříme si tedy nový projekt pomocí příkazu:

$ expo init TodoApp

Vybereme možnost Managed Blank projekt. Teď se přesuneme do složky a spustíme si projekt:

$ cd TodoApp
$ expo start

Nyní si můžeme spustit aplikaci na našem zařízení.

Základní funkčnost aplikace

Otevřeme si soubor App.js a přidáme si textový input pro naše TODO.

Importujeme si tedy potřebné komponenty:

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

Importovali jsme si hook useState a komponenty TextInput a Button.

Teď si vytvoříme stavové proměnné:

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

Proměnná enteredText nám bude sloužit na ukládaní textu z našeho inputu. Funkce taskInputHandler(), nám bude ukládat data z inputu do této proměnné a funkce handleAddTodo() nám bude vytvářet naše TODO. Aktuálně vypíše obsah enteredText a vynuluje.

Úprava JSX

Teď 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>
    );
}

Přidali jsme si komponentu TextInput, který slouží na vstup od uživatele. onChangeText se volá pokaždé když se text v inputu změní. Tehdy si uložíme vstup od uživatele do naší proměnné enteredText. Value nastavujeme hodnotu naší proměnné. Je to zapotřebí, protože každá změna stavu způsobí rerender. Tím pádem by se po každém změně enteredText nastavil input na prázdný řetězec. Tímto tedy zabezpečíme, že input zůstane po renderu stejný.

Dále jsme si přidali komponentu Button. Po kliknutí na tlačítko se nám náš text vypíše na obrazovku a vynuluje náš input.

Nyní si můžeme pustit naši aplikaci a uvidíme následující obrazovku:

Nyní když funguje input budeme si moct naše TODO's ukládat.

Vytvořme si tedy pole, do kterého je uložíme:

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

Teď si upravíme naší funkci 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("");
}

Nejdříve si ověříme, že uživatel zadal TODO. Dále si vytvoříme jednoduchý objekt task, který obsahuje id. To budeme potřebovat při vykreslování listu, aby komponenta věděla, jak rozlišit jednotlivé tasky. Dále máme proměnnou finished, která značí, jestli daný task je hotov a jako poslední je proměnná description, která obsahuje naše TODO.

Nakonec přidáme náš nově vytvořený task do našeho pole. Využíváme takzvaný spread operátor, ten nám "rozloží" naší stávající pole do nového pole a dále tam přidáme náš nový task. Více o spread operátoru si můžeme pročíst v článku iteratory a generatory.

Vykreslení

Dvakrát za sebou jsme nastavili nový stav, pro aplikaci to neznamená, že se 2x překreslí. React Native tyto useState proměnné upraví naráz a tím pádem se aplikace překreslí jenom jednou.

Nyní si pojďme naše TODO's vykreslit. Vytvoříme si tedy novou funkci:

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

Ta jako input dostane náš task objekt a vrátí JSX kód vykreslující dané TODO. Importujeme komponentu FlatList:

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

Teď si můžeme vykreslit naše TODO's v komponentě listu:

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

    </View>
  );
}

Komponenta FlatList má několik atributů. My využijeme renderItem, který slouží na vykreslení jednotlivých položek. Dále specifikujeme data, které má FlatList vykreslovat. Jako poslední musíme komponentě FlatList dát vědět, která část našeho objektu je unikátní klíč. K tomu slouží prop keyExtractor. V našem případě je to tedy id.

Ještě předtím, než aplikaci spustíme, si přidáme styl padding do našeho view. Upravme si tedy náš StyleSheet objekt:

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

Po spuštění a zadání pár TODO, bude naše aplikace vypadat následovně:

Naše komponenty

Nyní si aplikaci rozdělíme na komponenty. Vytvoříme si soubor ./components/TodoItem.js.

Importujeme si do něj potřebné komponenty:

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

Teď si vytvoříme naši komponentu:

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

export default TodoItem;

Jak je možné vidět, využíváme v této komponentě parametr props. Ten obsahuje všechny informace o této komponentě. Například všechny atributy a tím si můžeme nadefinovat komponenty.

Pro tuto lekci je to dnes vše. Zbytek aplikace si dokončíme v další lekci.

V další lekci, React Native - Dokončení TODO aplikace, si vytvoříme nové komponenty na přidávání TODOs a jejich zobrazení a celou aplikaci tak dokončíme.