Формы — это основной способ взаимодействия пользователя с приложением. Они позволяют вводить текст, отправлять данные, авторизовываться, заполнять профили и многое другое. В React Native работа с формами похожа на веб-разработку, но есть свои нюансы, такие как управление клавиатурой на мобильных устройствах.

Сегодня мы разберём:

• Как работать с текстовыми полями (TextInput).
• Как управлять клавиатурой.
• Использование библиотеки Formik для упрощения работы с формами.
• На практике создадим форму регистрации с валидацией.

Теория: текстовые поля и клавиатура

TextInput

TextInput — это основной компонент для ввода текста в React Native. Он гибкий, поддерживает стилизацию и разные события, такие как ввод текста, фокус, размытие (blur).

Пример TextInput:

import React, { useState } from 'react';
import { View, TextInput, Text, StyleSheet } from 'react-native';

const TextInputExample = () => {
  const [value, setValue] = useState('');

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Введите текст:</Text>
      <TextInput
        style={styles.input}
        value={value} // Значение текстового поля
        onChangeText={setValue} // Обработчик изменения текста
        placeholder="Например, ваше имя"
      />
      <Text>Вы ввели: {value}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20 },
  label: { marginBottom: 10, fontSize: 16 },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 5,
    marginBottom: 10,
  },
});

export default TextInputExample;

Управление клавиатурой

На мобильных устройствах клавиатура может перекрывать текстовые поля. Чтобы с этим справляться:

• Используйте KeyboardAvoidingView, чтобы переместить содержимое экрана.
• Используйте Keyboard.dismiss() для скрытия клавиатуры при клике вне текстового поля.

Пример работы с клавиатурой:

import React, { useState } from 'react';
import {
  View,
  TextInput,
  Text,
  StyleSheet,
  KeyboardAvoidingView,
  TouchableWithoutFeedback,
  Keyboard,
  Platform,
} from 'react-native';

const KeyboardExample = () => {
  const [value, setValue] = useState('');

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.inner}>
          <Text style={styles.label}>Введите текст:</Text>
          <TextInput
            style={styles.input}
            value={value}
            onChangeText={setValue}
            placeholder="Введите что-нибудь"
          />
          <Text>Вы ввели: {value}</Text>
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 },
  inner: { padding: 20, flex: 1, justifyContent: 'center' },
  label: { marginBottom: 10, fontSize: 16 },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 5,
    marginBottom: 10,
  },
});

export default KeyboardExample;

Formik: удобная работа с формами

Formik — это библиотека, которая упрощает создание и управление формами в React (включая React Native). Она помогает:

• Управлять состоянием формы.
• Обрабатывать ввод и отправку данных.
• Валидировать поля.

Formik работает отлично в связке с библиотекой Yup для валидации. Установим их:

npm install formik yup

Практика: форма регистрации с валидацией

Создадим простую форму регистрации, где пользователь вводит имя, email и пароль. Будем проверять:

• Имя не может быть пустым.
• Email должен быть в правильном формате.
• Пароль должен быть не короче 6 символов.

Код формы регистрации

import React from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { Formik } from 'formik';
import * as Yup from 'yup';

// Валидация с помощью Yup
const validationSchema = Yup.object({
  name: Yup.string().required('Имя обязательно'),
  email: Yup.string().email('Некорректный email').required('Email обязателен'),
  password: Yup.string()
    .min(6, 'Пароль должен содержать не менее 6 символов')
    .required('Пароль обязателен'),
});

const RegistrationForm = () => {
  return (
    <Formik
      initialValues={{ name: '', email: '', password: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        console.log('Данные формы:', values);
        alert('Регистрация успешна!');
      }}
    >
      {({
        handleChange,
        handleSubmit,
        values,
        errors,
        touched,
        handleBlur,
      }) => (
        <View style={styles.container}>
          {/* Поле ввода имени */}
          <Text style={styles.label}>Имя</Text>
          <TextInput
            style={styles.input}
            onChangeText={handleChange('name')}
            onBlur={handleBlur('name')} // Обработка ухода фокуса
            value={values.name}
            placeholder="Введите ваше имя"
          />
          {touched.name && errors.name && (
            <Text style={styles.error}>{errors.name}</Text>
          )}

          {/* Поле ввода email */}
          <Text style={styles.label}>Email</Text>
          <TextInput
            style={styles.input}
            onChangeText={handleChange('email')}
            onBlur={handleBlur('email')}
            value={values.email}
            placeholder="Введите ваш email"
            keyboardType="email-address"
          />
          {touched.email && errors.email && (
            <Text style={styles.error}>{errors.email}</Text>
          )}

          {/* Поле ввода пароля */}
          <Text style={styles.label}>Пароль</Text>
          <TextInput
            style={styles.input}
            onChangeText={handleChange('password')}
            onBlur={handleBlur('password')}
            value={values.password}
            placeholder="Введите пароль"
            secureTextEntry
          />
          {touched.password && errors.password && (
            <Text style={styles.error}>{errors.password}</Text>
          )}

          {/* Кнопка отправки */}
          <Button title="Зарегистрироваться" onPress={handleSubmit} />
        </View>
      )}
    </Formik>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  label: {
    fontSize: 16,
    marginBottom: 5,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 5,
    marginBottom: 10,
    backgroundColor: '#fff',
  },
  error: {
    color: 'red',
    marginBottom: 10,
  },
});

export default RegistrationForm;

Разберём код

Formik

• Мы используем initialValues для начального состояния формы.
• Валидация обрабатывается с помощью Yup.
• Метод handleSubmit вызывается при нажатии на кнопку отправки.

Yup

• Проверяем, что поля заполнены.
• Указываем формат email.
• Проверяем длину пароля.

UI

• Используем TextInput для ввода данных.
• Отображаем ошибки под соответствующими полями.

Дополнения и улучшения

• Скрытие клавиатуры: Оберните форму в TouchableWithoutFeedback, чтобы скрывать клавиатуру при нажатии вне полей.
• Добавьте лоадер: Показывайте индикатор загрузки при отправке данных на сервер.
• Запрос на сервер: Подключите API для отправки данных формы.