Лесно изграждане на формуляри в React Native
Ако създавате приложение React Native, това е почти гаранция, че ще трябва да създадете поне една форма. Реалността е, че вероятно ще изградите доста (влезте, регистрирайте се, редактирайте профил и т.н.)
Формулярите са доста прости, нали?
да! Но може да има доста включени движещи се части. Няколко неща, за които може да се наложи да се погрижите...
- Създаване на необходимите компоненти (въвеждания на текст, входове за избор, квадратчета за отметка, превключватели и т.н.)
- Писане/намиране на логика за валидиране
- Актуализиране на вашите компоненти за показване на грешки (винаги забравям да направя това)
- Актуализиране на вашия потребителски интерфейс всеки път, когато промените полета
Нито едно от тези неща не е трудно, но може да отнеме много време. Особено ако се опитвате да изпратите нещо бързо.
В миналото винаги съм правил всичко това сам. Но отнема време от това, което наистина искам да правя.
Започнах да се оглеждам за решения за разрешаване на този проблем и попаднах на tcomb-form-native. Прави създаването на формуляри в React Native лесно, като просто трябва да дефинирате модел за този формуляр и сте готови! Без да се занимавате с дузина компоненти.
Настройвам
За да започнете, „съставих лека закуска“, която ще ни позволи да вършим цялата си работа в мрежата. Това е страхотен инструмент.
Ще забележите в горната част на файла, който добавих import t from 'tcomb-form-native';, което е библиотеката, която ще използваме, за да изградим нашия формуляр. Snack автоматично ще го изтегли вместо нас.
Съвет: Намирам, че сканирането на QR кода от приложението Expo на моето устройство дава най-доброто изживяване при разработката.
Ако предпочитате да правите това извън Snack, уверете се, че сте инсталирали tcomb-form-native чрез npm или yarn.
Какво изграждаме
Ще изградим формуляр за регистрация, който има следните полета
- Имейл (задължително)
- потребителско име (по избор)
- Изисква се парола)
- Съгласете се с условията (задължително)
Дефиниране на модела на формата
Първото нещо, което трябва да направим, е да дефинираме модел за нашата форма — това е, което ще бъде предадено на компонента на формуляра и ще се използва за изобразяване на полетата.
Когато дефинираме модела, трябва да посочим поне полето и вида на стойността, която приема.
Ние използваме само няколко от различните типове, но има „повече налични“.
Нека да продължим и да изобразим този формуляр, за да видим какво имаме. Първо трябва да получим компонента Form (ред 6), след което трябва да изобразим формуляра и да предадем нашия модел към него като тип (ред 19).
Прихващане на данни от формуляри
Добро начало! Сега нека всъщност се опитаме да уловим тези данни. Просто ще използваме основния компонент Button (който идва от react-native), за да направим това и ще добавим функция handleSubmit към компонента.
Сега за действителен достъп и работа с нашия формуляр трябва да добавим препратка към него и с това трябва да можем да извикаме getValue() от handleSubmit.
Когато обаче натиснете „Регистрация“, всички полета стават червени — автоматично валидиране!
Това идва от времето, когато дефинирахме нашия модел по-рано. Потребителското име обаче трябва да бъде незадължително поле. Нека поправим това.
Персонализиране на формуляра
За да направим това, ще използваме t.maybe, за да кажем на tcomb, че това е незадължително поле.
Бум. Толкова лесно.
Също така искам да променя етикета за полето „Условия“. Искам да пише „Съгласен съм с условията“ — можем да направим това чрез опции, предадени на Form.
Тази част е малко многословна, но има смисъл от начина, по който е настроена. Създаваме обект, добавяме ключ с име „fields“ (тъй като модифицираме полетата), добавяме ключ към този обект, който се подравнява с ключа в нашия модел („terms“) и след това вътре в този обект задаваме нов етикет.
Кодът е по-лесен за разбиране.
След това предайте тези опции на компонента Form
Нека направим същото, за да добавим някои съобщения за грешка.
Промяна на дизайна на формуляра
Последното нещо, което искам да направя, е леко да променя дизайна на този формуляр. Можете да направите „доста неща“, но аз просто ще променя цвета на етикета на този формуляр.
Първото нещо, което ще направя, е да създам нов обект formStyles и да копирам всички стилове по подразбиране, така че да не се налага да започвам от нулата.
„Ето пълната таблица със стилове по подразбиране“.
След това ще го персонализирам с моите A+ дизайнерски умения.
Прости и красиви модификации на дизайна. Почти всичко във формата по подразбиране може да се персонализира.
Както можете да видите, tcomb-form-native прави изграждането на формуляри бързо и лесно, но също така ви дава гъвкавостта, от която се нуждаете, за да създавате формуляри, които дават на потребителите необходимата информация и да пасват на останалата част от приложението ви (освен ако не проектирам, разбира се).
Можете да получите окончателния код на Snack.
И това е всичко, хора! Току-що надрасках повърхността на това, на което е способен този пакет. Препоръчвам ви да го изпробвате във вашите приложения! (И не забравяйте да благодарите на автора на пакета - отвореният код не е лесен!)
Ако сте намерили това за полезно, помислете дали да вземете моя „безплатен курс по React Native“, който ще ви накара да започнете да работите 500% по-бързо, отколкото ако го направите сами (измислих това число).
✌
