Создание списка дел (Todo List)

1.

React Native.
Создание списка дел (Todo List).
Курс: Верстка и создание приложений 5 семестр
ИПТИП
Кафедра Компьютерного дизайна
Преподаватель: Пьянкова Марина Анатольевна

Структура проекта
Разработка проекта «Список дел» является не сложной
разработкой. Но в то же время она позволяет быстро внедриться во
все основные нюансы построения проектов.
Все структурные элементы проекта, например шапка приложения,
подвал и пр. мы будем стараться выделить в отдельный компонент.
А в главном компоненте App.js все компоненты будут подключаться
и выводиться. Для таких компонентов создаем отдельную папку
components.
2

3.

Шапка проекта
В папке components создаем пока 2 компонента: header.js и list.js. И
создаем необходимую первоначальную разметку для данных компонентов
и добавляем стилизацию (у каждого стилистические решению могут быть
свои). После необходимо подключить компонент к основному файлу App.js
при помощи import.
3

4.

Отображение списка элементов
Для реализации списка в компоненте App.js необходимо добавить массив,
который будет содержать полностью все необходимые элементы. Также в
этот массив мы будем добавлять новые элементы. Для этого создаем const,
создаем не просто массив, а функцию через которую мы будем
устанавливать новые значения. Нам необходимо использовать состояния,
поэтому импортируем хук useState. Далее создаем элементы массива,
которые также являются объектами и содержат в себе ключ и значение.
Для того чтобы вывести на экран этот список
необходимо подключить объект FlatList и
используем его в return . У него необходимо
также указать несколько атрибутов:
1. data – в нем указывается список, с
которым мы работаем (listOfItems)
2. renderItem – в котором указывается
функция, которая осуществит вывод
каждого конкретного элемента и в каком
формате (стандартно через объект Text).
4

5.

Отображение списка элементов
5

6.

Компонент для каждого элемента
Для реализации компонента для каждого элемента списка поработаем с
компонентом list.js и создадим в нем разметку по аналогии с header.js и
также импортируем необходимые объекты. Только место объекта View
подключаем объект TouchableOpacity для того, чтобы в момент нажатия
происходил некий эффект. Будем также передавать в этот компонент наши
элементы el с text или key.
6

7.

Компонент для каждого элемента
Далее необходимо подключить к главному компоненту App.js. И теперь
вместо вывода определенного текста в App.js мы обращаемся к
компоненту ListItem и передаем параметр el, который мы создали в
компоненте list.js и указываем для него определенное значение item. По
итогу разницы в отображении вы не увидите, просто передача элементов
происходит через отдельный компонент.
7

8.

Компонент с формой
Сейчас необходимо добавить функционал, за счет которого сможем
добавлять новые элементы списка дел, при вводе их через форму. Для этого
необходимо создать компонент form.js он будет отвечать за форму для
добавления новых значений списка дел. Для этого создаем основную
структуру для него, которую вы можете скопировать из какого либо другого
компонента, так как начальная структура очень схожа. Саму функцию
назовем Form.
8

9.

Компонент с формой
Внутри объекта View создаем структуру из поля ввода и кнопки. Для поля
ввода мы добавляем стили и обработчик событий onChangeText, который
будет срабатывать тогда, когда что-либо ввели в поле, он будет ссылаться на
функцию onChange, которую мы опишем выше перед return.
9

10.

11.

Компонент с формой
Сейчас необходимо реализовать работу самой функции onChange.
Дополнительные ее параметры это тот текст, который мы будем получать от
пользователя. Создадим еще одну константу text, которая будет хранить
введённый текст от пользователя. И для корректной работы мы будем
использовать состояния useState (и не забываем его импортировать). Рядом
с константой нужно записать еще функцию по установке этого значения
setValue и в onChange мы будем вызывать эту функцию и передавать
параметр text. И дальше этот параметр text мы можем передать в главный
файл App.js и добавить его в качестве нового элемента списка.
Дополнительно создайте стили для вашего поля ввода.
11

12.

Компонент с формой
Перейдите в главный файл App.js и добавьте в него компонент формы.
Использовать мы его будем после шапки. И с учетом ваших стилей вы
можете посмотреть получившийся результат.
12

13.

Компонент с формой
Дополнительно к полю ввода создадим кнопку в компоненте form.js и по
необходимости добавьте необходимую стилизацию для нее. Также для
кнопки создаем обработчик событий onPress, в котором отрабатывает
функция addHandler, передаваемая из главного файла.
13

14.

Компонент с формой
В главном файле App.js создадим функцию addHandler и передадим ее
со значением addHandler в компонент при помощи следующей записи
<Form addHandler={addHandler} />. Создаем константу и передаем ей
значение text, а в результате работы функции мы вызываем setListOfItems и в
качестве параметра мы будем получать весь предыдущий список list и в
return мы указываем, что нового мы будем делать с этим списком, а
именно будем возвращать абсолютно новый список, добавляя новый
элемент, который будет состоять из text и key (сгенерированное число), и
дополнительно передаем текущий список при помощи ...list.
14

15.

Компонент с формой
15

16.

Компонент с формой
Теперь наша задача создать функцию, которая позволит по нажатию на
элемент списка удалять его. Для этого в компоненте list.js необходимо
передать еще и функцию deleteHandler и в создаем обработчик события
нажатия и выполняем эту функцию передавая ключ элемента, на который мы
нажали.
16

17.

Компонент с формой
В основном фале App.js прописываем константу с функцией deleteHandler.
Мы получаем ключ конкретной записи и при помощи функции setListOfItems
обращаемся к списку и будем возвращать тот же самый список, но
отфильтруем и удалим элемент, с ключом, который мы передали.
И передаем функцию deleteHandler в компонент ListItem, после чего
элементы списка можно будет удалить по нажатию.
17

English Русский Правила