Легко создавайте формы в React Native

Если вы создаете приложение React Native, это почти гарантия, что вам нужно будет создать хотя бы одну форму. Реальность такова, что вы, вероятно, создадите довольно много (войдите, зарегистрируйтесь, отредактируйте профиль и т. Д.)

Формы довольно простые, правда?

Ага! Но может быть задействовано довольно много движущихся частей. Несколько вещей, о которых вам, возможно, придется позаботиться…

  1. Создание необходимых компонентов (текстовые поля, выбор входов, флажки, переключатели и т. Д.)
  2. Написание / поиск логики проверки
  3. Обновление ваших компонентов для отображения любых ошибок (я всегда забываю это делать)
  4. Обновление пользовательского интерфейса всякий раз, когда вы меняете поля

Все это не сложно, но может занять много времени. Особенно, если вы пытаетесь что-то отправить быстро.

Раньше я всегда делал все это сам. Но это отнимает время у того, чем я действительно хочу заниматься.

Я начал искать решения этой проблемы и наткнулся на tcomb-form-native. Это упрощает создание форм в React Native, просто нужно определить модель для этой формы, и все готово! Никакой возни с дюжиной компонентов.

Настраивать

Для начала я собрал закуску, которая позволит нам выполнять всю нашу работу в Интернете. Это отличный инструмент.

Вы заметите вверху добавленного мной файла import t from 'tcomb-form-native';, который представляет собой библиотеку, которую мы будем использовать для создания нашей формы. Snack автоматически подберет это для нас.

Совет: я считаю, что сканирование QR-кода из приложения Expo на моем устройстве дает лучший опыт разработки.

Если вы предпочитаете делать это вне Snack, убедитесь, что вы устанавливаете tcomb-form-native через npm или yarn.

Что мы строим

Мы создадим форму регистрации со следующими полями

  • Электронная почта (обязательно)
  • Имя пользователя (необязательно)
  • Требуется пароль)
  • Согласен с условиями (обязательно)

Определение модели формы

Первое, что нам нужно сделать, это определить модель для нашей формы - это то, что будет передано компоненту формы и использовано для визуализации полей.

При определении модели нам необходимо указать как минимум поле и тип значения, которое оно принимает.

Мы просто используем несколько разных типов, но есть более доступные.

Давайте продолжим и фактически визуализируем эту форму, чтобы увидеть, что у нас получилось. Сначала нам нужно получить компонент формы (строка 6), затем нам нужно отрендерить форму и передать ему нашу модель в качестве типа (строка 19).

Сбор данных формы

Хорошее начало! А теперь давайте попробуем получить эти данные. Для этого мы просто воспользуемся базовым Button компонентом (который происходит от react-native) и добавим handleSubmit функцию к компоненту.

Теперь, чтобы получить доступ к нашей форме и работать с ней, нам нужно добавить ссылку на нее, и с ее помощью мы сможем вызывать getValue() из handleSubmit.

Однако, когда вы нажимаете «Зарегистрироваться», все поля становятся красными - автоматическая проверка!

Это происходит из того момента, когда мы определили нашу модель ранее. Однако имя пользователя должно быть необязательным полем. Давай исправим это.

Настройка формы

Для этого мы будем использовать t.maybe, чтобы указать tcomb, что это необязательное поле.

Бум. Это просто.

Я также хочу изменить метку для поля «Условия». Я хочу, чтобы он сказал: «Согласен с условиями» - мы можем сделать это с помощью параметров, переданных в Form.

Эта часть немного многословна, но имеет смысл в том, как она устроена. Мы создаем объект, добавляем ключ с именем «поля» (поскольку мы изменяем поля), добавляем ключ к этому объекту, который совпадает с ключом в нашей модели («условия»), а затем внутри этого объекта мы устанавливаем новый лейбл.

Код легче понять.

Затем передайте эти параметры компоненту Form

Давайте сделаем то же самое, чтобы добавить сообщения об ошибках.

Изменение дизайна формы

Последнее, что я хочу сделать, это немного изменить дизайн этой формы. Вы можете сделать довольно много вещей, но я просто собираюсь изменить цвет метки в этой единственной форме.

Первое, что я собираюсь сделать, это создать новый объект formStyles и скопировать все стили по умолчанию, чтобы мне не приходилось начинать с нуля.

Вот полная таблица стилей по умолчанию.

Затем я настрою его, используя мои навыки дизайна A +z.

Простые и красивые модификации дизайна. Практически все в форме по умолчанию можно настроить.

Как видите, tcomb-form-native упрощает и ускоряет создание форм, но также дает вам гибкость, необходимую для создания форм, которые предоставляют пользователям необходимую информацию и подходят для остальной части вашего приложения (если, конечно, я не занимаюсь проектированием).

Вы можете получить финальный код на снэк.

И все, ребята! Я только что поверхностно коснулся того, на что способен этот пакет. Я рекомендую вам попробовать это в своих приложениях! (И обязательно поблагодарите автора пакета - с открытым исходным кодом непросто!)

Если вы нашли это полезным, подумайте о том, чтобы пройти мой бесплатный курс React Native, который поможет вам начать работу на 500% быстрее, чем если бы вы делали это самостоятельно (это число я подсчитал).

✌