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.