Добавьте значок мусорной корзины и реализуйте функцию удаления
В предыдущих статьях мы уже создали приложение, позволяющее пользователю добавлять задачи, а также убирать клавиатуру, когда он щелкает мышью вдали от клавиатуры.
Полное содержание:
Часть 1 — Создание базового макета и компонента заголовка
Часть 2 — Создание компонента элемента
Часть 3 — Создание компонента AddTask для вставки новой задачи
Часть 4 — Предупреждать, если есть ошибка
Часть 5 — Закрыть клавиатуру, когда вы щелкаете мышью вдали от клавиатуры
Часть 6 — Expo React Native Часть 6 — удалить элемент
Часть 7 — Использование flexBox для устранения проблемы с выключенным экраном.
Связанный курс:
Чтобы использовать значок в React Native, мы можем выполнить поиск на этом веб-сайте. Затем мы нажимаем на значок, который мы хотим.
В данный момент мы выбираем значок «удалить», предоставленный MaterialIcons. После того, как мы перейдем на страницу сведений, мы увидим, как импортировать и применить значок.
Добавьте значок удаления
import { MaterialIcons } from '@expo/vector-icons';
Теперь мы импортируем значок материала в верхней части проекта.
return (
<TouchableOpacity style={styles.item}>
<Text >{item.task}</Text>
<MaterialIcons name="delete" size={24} color="black"
/>
</TouchableOpacity>
)
Мы применяем стиль элемента к TouchableOpacity, а не к текстовому компоненту. Затем мы меняем flexDirection на row, а также добавляем justifyContent: «space-between», чтобы переместить имя задачи и значок удаления в обе стороны.
item: {
padding: 15,
borderColor: 'black',
borderRadius: 5,
borderWidth: 1,
marginTop: 15,
borderStyle: "dashed",
flexDirection: "row",
justifyContent: 'space-between',
}
пространство между
пространство вокруг
Добавьте функцию удаления задачи.
Чтобы проверить, можем ли мы выбрать конкретный элемент, мы присоединяем функцию оповещения, чтобы предупредить идентификатор элемента, когда пользователь нажимает на эту задачу.
<TouchableOpacity style={styles.item}>
<Text >{item.task}</Text>
<MaterialIcons name="delete" size={24} color="black"
onPress={() => alert(item.id)}
/>
</TouchableOpacity>
Он должен предупредить об этом идентификаторе задачи.
Поскольку состояние «задачи» находится внутри App.js, нам нужно вернуться к App.js, чтобы создать функцию deleteTask.
Он принимает конкретный идентификатор, чтобы определить, какой объект удалить. Он опирается на список предыдущих задач. Мы собираемся вынуть указанный и вернуть новый массив.
const deleteTask = id => {
setTasks(prevTasks => {
return prevTasks.filter(task => task.id != id)
})
}
После этого мы передадим эту функцию в качестве реквизита компоненту Task, чтобы
мы могли вызывать ее, когда нажимаем значок удаления.
<Task item={item}
deleteTask={deleteTask}
/>
Поскольку мы уже передаем функцию «deleteTask» компоненту задачи, мы деструктурируем внутри компонента задачи и связываемся с функцией удаления задачи при нажатии. Он передаст идентификатор элемента и вернет новый список задач. После того, как мы сохраним его, он должен удалить конкретный элемент.
<TouchableOpacity style={styles.item}>
<Text>{item.task}</Text>
<MaterialIcons name="delete" size={24} color="black"
onPress={() => deleteTask(item.id)}
/>
</TouchableOpacity>
Бесплатные уроки на ютубе
Подписывайтесь на нас:
