Предисловие
Подтолкнуло меня на написание этой статьи – внутреннее желание. Сложно ему отказывать, поэтому сейчас мы с вами напишем простой список задач, который выглядит вот так.
Чтобы понимать код нужно знать javascript и немного реакт. Создаём приложение.
npx expo init ToDoList, npm i expo-constants
expo-constants нам нужен для того, чтобы делать отступ нашего контента от StatusBar на телефонах. По-умолчанию, весь контент залезает под StatusBar.
В App.js создаем текстовое поле, кнопку для добавления задания и функции: для добавления задания, выполнения задания. Создаем состояния текстового поля и задач с помощью функции useState.
Для новичков в React. useState – React-hook (функция, которая возвращает массив первый элемент которого – состояние, а второй функция для изменения состояния.
App.js
https://gist.github.com/exoriri/d27f3c61f88b2ab620b78a8344a629ac
Теперь создадим компонент Task и ToDoList и передадим через Props'ы функции и задания.
ToDoList – список заданий.
Task – Задание.
ToDoList.js
https://gist.github.com/exoriri/9e7fb04156690fa1ff0596b5a6aa915a
Если с TodoList.js все понятно – просто проходим по списку и передаем через Props'ы настройки задания, то Task.js требует небольших объяснений.
По-умолчанию в React-Native нет чекбоксов, поэтому нам надо сделать его самим. Вариантов много, но я нарисовал чекбокс в фигме, скачал картинку и ставил его вместо пустого квадратика, который я сделал стилями.
Task.js
https://gist.github.com/exoriri/e68ad10da5dc679d86b47da70a0d02bf
Думаю мало объяснений в статье, но вы молодцы, поэтому разберетесь. Ссылка на полный код https://github.com/exoriri/react-native-article-todo
#reactjs #react-native #мобильное приложения #разработка мобильных приложений #IT
