Как реализовать форму с полями ввода?
Создание формы с полями ввода в React Native включает в себя использование компонента TextInput и отслеживание ввода пользователя через состояние (state), часто в сочетании с обработкой кнопки отправки и валидацией данных. В более сложных случаях используются библиотеки вроде formik, react-hook-form и yup для управления формой и валидацией.
Основной компонент: TextInput
TextInput — компонент для ввода текста пользователем. Работает аналогично input в HTML и может быть настроен для разных типов данных: текст, email, пароль, телефон, числа и т.д.
Пример простой формы (имя + email)
import React, { useState } from 'react';
import { View, TextInput, Button, Text, StyleSheet, Alert } from 'react-native';
export default function App() {
const \[name, setName\] = useState('');
const \[email, setEmail\] = useState('');
const handleSubmit = () => {
if (name.trim() === '' || email.trim() === '') {
Alert.alert('Ошибка', 'Пожалуйста, заполните все поля');
return;
}
console.log('Имя:', name);
console.log('Email:', email);
Alert.alert('Успех', \`Добро пожаловать, ${name}\`);
};
return (
<View style={styles.container}>
<Text style={styles.label}>Имя</Text>
<TextInput
style={styles.input}
placeholder="Введите имя"
value={name}
onChangeText={setName}
/>
<Text style={styles.label}>Email</Text>
<TextInput
style={styles.input}
placeholder="Введите email"
value={email}
onChangeText={setEmail}
keyboardType="email-address"
autoCapitalize="none"
/>
<Button title="Отправить" onPress={handleSubmit} />
</View>
);
}
const styles = StyleSheet.create({
container: {
padding: 20,
marginTop: 50,
},
label: {
marginVertical: 8,
fontWeight: 'bold',
},
input: {
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
borderRadius: 4,
},
});
Основные props компонента TextInput
| Свойство | Назначение |
|---|---|
| value | Значение поля |
| --- | --- |
| onChangeText | Функция, вызываемая при каждом вводе символа |
| --- | --- |
| placeholder | Текст-заполнитель |
| --- | --- |
| keyboardType | Тип клавиатуры (default, email-address, numeric, phone-pad) |
| --- | --- |
| secureTextEntry | Скрытие текста для паролей |
| --- | --- |
| autoCapitalize | Управление автокапитализацией (none, sentences, words, characters) |
| --- | --- |
| multiline | Многострочный ввод |
| --- | --- |
| numberOfLines | Кол-во видимых строк (если multiline) |
| --- | --- |
| editable | Можно ли редактировать |
| --- | --- |
| onSubmitEditing | Событие при нажатии "Enter" или "Done" на клавиатуре |
| --- | --- |
| returnKeyType | Тип кнопки (например, done, next) |
| --- | --- |
Ввод пароля
<TextInput
secureTextEntry={true}
placeholder="Пароль"
value={password}
onChangeText={setPassword}
/>
Управление фокусом между полями
Можно использовать ref и метод focus:
const emailRef = useRef(null);
<TextInput
placeholder="Имя"
returnKeyType="next"
onSubmitEditing={() => emailRef.current.focus()}
/>
<TextInput
placeholder="Email"
ref={emailRef}
/>
Очистка формы
Просто сбросьте значения состояний:
setName('');
setEmail('');
Подключение клавиатуры
Чтобы скрыть клавиатуру при нажатии вне поля ввода:
import { Keyboard, TouchableWithoutFeedback } from 'react-native';
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View>{/\* форма \*/}</View>
</TouchableWithoutFeedback>
Простая ручная валидация
if (email.trim() === '' || !email.includes('@')) {
Alert.alert('Ошибка', 'Введите корректный email');
}
Подключение библиотеки Formik (управление формой)
npm install formik
Пример:
import { Formik } from 'formik';
<Formik
initialValues={{ name: '', email: '' }}
onSubmit={(values) => console.log(values)}
\>
{({ handleChange, handleBlur, handleSubmit, values }) => (
<View>
<TextInput
placeholder="Имя"
onChangeText={handleChange('name')}
onBlur={handleBlur('name')}
value={values.name}
/>
<TextInput
placeholder="Email"
onChangeText={handleChange('email')}
onBlur={handleBlur('email')}
value={values.email}
keyboardType="email-address"
/>
<Button onPress={handleSubmit} title="Отправить" />
</View>
)}
</Formik>
Валидация через Yup
npm install yup
import \* as Yup from 'yup';
const validationSchema = Yup.object().shape({
name: Yup.string().required('Введите имя'),
email: Yup.string().email('Неверный email').required('Введите email'),
});
И передаётся в Formik:
<Formik
initialValues={{ name: '', email: '' }}
validationSchema={validationSchema}
onSubmit={...}
\>
...
</Formik>
Отображение ошибок
{errors.email && touched.email && (
<Text style={{ color: 'red' }}>{errors.email}</Text>
)}
Пример формы с 3 полями и валидацией вручную
const \[name, setName\] = useState('');
const \[email, setEmail\] = useState('');
const \[password, setPassword\] = useState('');
const handleSubmit = () => {
if (!name || !email || !password) {
Alert.alert('Ошибка', 'Все поля обязательны');
return;
}
if (!email.includes('@')) {
Alert.alert('Ошибка', 'Введите корректный email');
return;
}
if (password.length < 6) {
Alert.alert('Ошибка', 'Пароль слишком короткий');
return;
}
console.log({ name, email, password });
};
Советы по UX
-
Используйте keyboardType для удобной клавиатуры.
-
Используйте returnKeyType="next" для переключения между полями.
-
Добавляйте placeholder и подписи (label) для ясности.
-
Добавляйте autoCapitalize="none" для email/паролей.
-
Добавьте show/hide password кнопку к полям с паролем.
-
Скрывайте клавиатуру при тапе вне поля.
-
Обязательно показывайте ошибки валидации.
Создание формы в React Native требует комбинирования TextInput, состояний (useState, Formik, react-hook-form), управления клавиатурой и визуального отклика. Такой подход обеспечивает интерактивные и валидируемые формы, адаптированные под мобильные платформы.