Создание предупреждающих сообщений
В этой статье мы собираемся добавить некоторую проверку. Если поле ввода пусто и пользователь нажимает кнопку «добавить задачу».
Полное содержание:
Часть 1 — Создание базового макета и компонента заголовка
Часть 2 — Создание компонента элемента
Часть 3 — Создание компонента AddTask для вставки новой задачи
Часть 4 — Предупреждать, если есть ошибка
Часть 5 — Закрыть клавиатуру, когда вы щелкаете мышью вдали от клавиатуры
Часть 6 — Expo React Native Часть 6 — удалить элемент
Часть 7 — Использование flexBox для устранения проблемы с выключенным экраном.
Связанный курс:
Появится предупреждающее сообщение, чтобы пользователь знал, что он должен ввести что-то в поле ввода, прежде чем нажимать кнопку.
Во-первых, нам нужно импортировать оповещение вверху.
import { StyleSheet, Text, View, FlatList, SafeAreaView, Alert } from 'react-native';
Внутри функции addTask мы собираемся проверить, существует ли текст, если да, мы добавим его в список, иначе мы покажем предупреждающее сообщение.
const addTask = text => {
if (!text) {
Alert.alert('No tasks?', 'Please add a task', { text: 'OK' })
} else {
setTasks(prevTodos => {
return [{ task: text, id: uuidv4() }, ...prevTodos]
})
}
}
Нам нужно пройти через несколько разных аргументов. Первый — это заголовок предупреждения. Второй — это какое-то сообщение, и мы собираемся сказать «Пожалуйста, добавьте задачу».
Последний параметр представляет собой кнопку в предупреждающем сообщении. Здесь мы указываем текст этой кнопки «ОК».
Бесплатные уроки на Youtube:
Подписывайтесь на нас:
