ReactNative — стиль placeholder’а | OTUS
⚡ Подписка на курсы OTUS!
Интенсивная прокачка навыков для IT-специалистов!
Подробнее

Курсы

Программирование
Python Developer. Professional
-3%
Разработчик на Spring Framework
-5%
iOS Developer. Professional
-8%
Golang Developer. Professional
-6%
Базы данных
-12%
Agile Project Manager
-5%
Android Developer. Professional
-11%
Microservice Architecture
-5%
C++ Developer. Professional
-5%
Highload Architect
-6%
JavaScript Developer. Basic
-8%
Kotlin Backend Developer
-9%
C# Developer. Professional
-9%
Team Lead
-6%
Алгоритмы и структуры данных Разработчик программных роботов (RPA) на базе UiPath и PIX Unity Game Developer. Basic Разработчик голосовых ассистентов и чат-ботов Vue.js разработчик VOIP инженер NoSQL Супер-практикум по использованию и настройке GIT Symfony Framework iOS Developer. Basic Супер-интенсив «СУБД в высоконагруженных системах» Супер-интенсив "Tarantool"
Инфраструктура
DevOps практики и инструменты
-12%
Базы данных
-12%
Network engineer. Basic
-10%
Network engineer
-4%
Экcпресс-курс «ELK»
-10%
Инфраструктурная платформа на основе Kubernetes
-6%
Administrator Linux.Basic
-10%
Экспресс-курс «CI/CD или Непрерывная поставка с Docker и Kubernetes»
-30%
Дизайн сетей ЦОД
-13%
PostgreSQL
-8%
Разработчик программных роботов (RPA) на базе UiPath и PIX Reverse-Engineering. Professional Внедрение и работа в DevSecOps Administrator Linux. Advanced Infrastructure as a code in Ansible Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Экспресс-курс «IaC Ansible»
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

ReactNative — стиль placeholder’а

React_Deep_21.8-5020-0db432.png

Недавно возникла проблема, что у основного текста и у placeholder в дизайне разные стили:

1-20219-d9f4d7.png

TextInput позволяет изменять стиль основного текста и задавать цвет для placeholder. Однако изменить размер или шрифт невозможно. Мы видим, что свойства «placeholderStyle» нет.

2-20219-a0db17.png

В такой ситуации нам приходится брать всё в свои руки и расширять этот компонент.

Алгоритм действий

1.Создадим компонент TextInputPlaceholderStyle и пробросим вниз свойства. Сейчас наш компонент просто дублирует TextInput.

3-20219-b4e3e7.png

2.Заведём флаг в состоянии, который будет определять, показывается placeholder сейчас или нет.

4-20219-5ca545.png

3.Опишем функцию, которая будет изменять это состояние и используем её (не забываем о том, что onChange может так же передаваться как свойство, и нам надо её вызвать).

5-20219-6336ba.png

4.В зависимости от состояния компонента используем обычный style или placeholderStyle.

6-20219-eadda4.png

5.Пример использования:

7-20219-484f0d.png

6.Если вы используете TypeScript, важно сохранить типизацию этого компонента, добавив свойство placeholderStyle.

8-20219-9671ab.png

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться
🔥 Только до 28.02
Успейте приобрести курсы февраля на выгодных условиях! Подробности в чате.