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

Lekce 4 - React Native - Dokončení TODO aplikace Nové

V minulé lekci, React Native - TODO aplikace, jsme si vytvořili základní funkčnost TODO aplikace.

Naposledy jsme skončili u props. Začneme tím, že si upravíme naši novou komponentu TodoItem. Pojďme si tedy ukázat, jak to funguje a upravme si return v souboru components/TodoItem.js následovně:

const TodoItem = (props) => {
    return (
        <TouchableOpacity
            key={props.item.id}
            onPress={props.onToggleFinish.bind(this, props.item.id)}
            onLongPress={props.onDelete.bind(this, props.item.id)}
        >
            <View style={[styles.listItem, { backgroundColor: props.item.finished ? '#afa' : '#ccc' }]} >
                <Text>{props.item.description}</Text>
            </View>
        </TouchableOpacity>
    );
}

Využíváme několika nových věcí jako je třeba TouchableOpacity. Tato komponenta slouží jako Button a ulehčuje nám stylizování a další věci. Také nám dovoluje použít atributy jako jsou onPress a onLongPress. Jak je možné vidět, využíváme props.onToggleFinish a props.onDelete. Po krátkém kliknutí se nám náš TODO task buď splní nebo znova stane aktivním. Po dlouhém stlačení se daný TODO smaže.

Dále využíváme View, který nám bude stylizovat TODO tasky. Využíváme pro něj tento styl:

style={[styles.listItem, { backgroundColor: props.item.finished ? '#afa' : '#ccc' }]}

Nejdříve použijeme předefinovaný styl ze StyleSheet objektu, který si za chvíli vytvoříme. Dále nastavujeme barvu pozadí dle toho, jestli je TODO hotové nebo ne. V komponentě Text si vypíšeme popis TODO tasku.

Využíváme tedy atributy onToggleFinish, onDelete a item. Naši komponentu budeme muset tedy používat zhruba takto:

<TodoItem
    item={taskObject}
    onToggleFinish={toggleTaskHandler}
    onDelete={removeTaskHandler} />

Jako poslední si v naší komponentě nadefinujeme StyleSheet objekt:

const styles = StyleSheet.create({
    listItem: {
        padding: 10,
        marginVertical: 10,
        backgroundColor: '#ccc',
        borderColor: 'black',
        borderWidth: 1
    }
});

Nyní se vraťme do souboru App.js. Importujeme si novou komponentu TodoItem:

import TodoItem from "./components/TodoItem"
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Dále si upravme naši funkci renderTaskItem tak, abychom využili naši novou komponentu:

const renderTaskItem = ({ item }) => {
    return (
      <TodoItem
        item={item}
        onToggleFinish={toggleTask}
        onDelete={removeTaskHandler} />
    )
  }

A vytvořme si potřebné funkce zmíněné z kódu výše do hlavní funkce App():

const removeTaskHandler = taskId => {
  setTaskArray(taskArray => taskArray.filter(task => task.id != taskId))
}

const toggleTask = taskId => {
  /* Never mutate state directly, can cause a lot of issues */
  let tmpArray = [...taskArray];
  for (var i in tmpArray) {
    if (tmpArray[i].id == taskId) {
      tmpArray[i].finished = !tmpArray[i].finished;
      break; // Stop this loop, we found it!
    }
  }
  setTaskArray(tmpArray);
}

Funkce removeTaskHandler() je vcelku jednoduchá, vyfiltruje dané TODOs, aby neobsahovaly námi vymazané tasky. Parametr taskId jsme si nabindovali v naší komponentě. Ve funkci toggleTask() si nejdříve zkopírujeme naše pole TODOs, aby jsme ho neupravovali napřímo. Dále v cyklu for najdeme task, který chceme upravit. Poté námi upravené pole znova nastavíme jako naše nové pole TODOs. Když si spustíme naši aplikaci, můžeme si teď přidávat TODOs, dokončovat je nebo mazat:

Naše aplikace je nyní zcela funkční, avšak pojďme si ji upravit ještě dále. Vytvoříme si novou komponentu. Vytvořme si tedy soubor ./components/TodoInput.js.

Importujme si tedy potřebné komponenty a vytvořme si základ:

import React, { useState } from 'react'
import { View, TextInput, Button, StyleSheet, Modal } from 'react-native'
const TodoInput = (props) => {
    return (
        <Text>Hello World</Text>
    );
}
export default TodoInput;
const styles = StyleSheet.create({
});

Tato komponenta bude sloužit po náš input. Budeme využívat komponentu Modal, která slouží na vytvoření obsahu nad naším základním view. Naši komponentu budeme pak využívat následovně:

<TodoInput
        visible={isAddMode}
        onAddTask={addTaskHandler}
        onCancel={cancelGoalAdditionHandler}
      />

Tím pádem budeme skrz props mít přístup k visible, onAddTask a onCancel. Budeme potřebovat stavovou proměnou, která nám bude ukládat obsah našeho inputu, jako jsme to využívali v App.js:

const TodoInput = (props) => {
    const [enteredTask, setEnteredTask] = useState("");

    const taskInputHandler = (enteredText) => {
        setEnteredTask(enteredText);
    }
...

Nyní si pojďme upravit kód JSX, které bude komponenta generovat:

return (
        <Modal visible={props.visible} animationType="slide">
            <View style={styles.inputContainer}>
                <TextInput
                    placeholder="Task description"
                    style={styles.input}
                    onChangeText={taskInputHandler}
                    value={enteredTask}
                />
                <View style={styles.buttonContainer}>
                    <View style={styles.button}>
                        <Button title="CANCEL" color="red" onPress={props.onCancel} />
                    </View>
                    <View style={styles.button}>
                        <Button title="ADD" onPress={() => {
                            props.onAddTask(enteredTask);
                            setEnteredTask("")
                        }} />
                    </View>
                </View>
            </View>
        </Modal>
    );

Naše Modal komponenta bude obsahovat jeden TextInput a dva Button. Chování tlačítek budeme ovládat zase skrze props. Upravme si ještě náš objekt StyleSheet, aby obsahoval naše vlastní styly:

const styles = StyleSheet.create({
    inputContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    input: {
        width: '80%',
        borderColor: 'black',
        borderWidth: 1,
        padding: 10,
        marginBottom: 10
    },
    buttonContainer: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        width: '60%'
    },
    button: {
        width: '40%'
    }
});

Naše komponenta je nyní hotová a můžeme se vrátit do souboru App.js. Už nebudeme potřebovat proměnnou enteredText a funkci taskInputHandler(), tím pádem je můžeme odstranit. Dále bude zapotřebí spravovat viditelnost naší nové komponenty. Na to nám poslouží:

const [isAddMode, setIsAddMode] = useState(false);

Upravme si tedy naše JSX ve funkci App():

return (
    <View style={styles.container}>
      {/* For simplification purpose we don't install SafeAreaView but use padding to make "fake" save SaveAreaView */}
      <Button title="Add New Task" onPress={() => setIsAddMode(true)} />
      <TodoInput
        visible={isAddMode}
        onAddTask={handleAddTodo}
        onCancel={cancelTodoAdditionHandler}
      />
      <FlatList
        renderItem={renderTaskItem}
        data={taskArray}
        keyExtractor={(item) => item.id}
      />
    </View>
  );

Využíváme naši nově vytvořenou komponentu, avšak ještě jsme si ji neimportovali, tak to pojďme udělat:

import React, { useState } from 'react';

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

import TodoItem from "./components/TodoItem"
import TodoInput from "./components/TodoInput"

Jako poslední věc je zapotřebí upravit naši funkci handleAddTodo() a přidat novou funkci cancelTodoAdditionHandler():

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

const cancelTodoAdditionHandler = () => {
  setIsAddMode(false);
}

Po spuštění bude přidávání TODO vypadat následovně.

Gratuluji, vytvořili jste si první reálnou aplikaci, kterou můžete využívat. Pro dnešní lekci je to tedy vše.

V další lekci, React Native - Debugovaní aplikace, si ukážeme možnosti ladění React Native aplikací.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 2x (95.49 MB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
React Native - TODO aplikace
Všechny články v sekci
React Native
Článek pro vás napsal Jakub Gabčo
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!