ReactNative — стиль placeholder’а | OTUS
🔥 BLACK FRIDAY!
Максимальная скидка -25% на всё. Успейте начать обучение по самой выгодной цене.
Выбрать курс

Курсы

Программирование
iOS Developer. Basic
-25%
Python Developer. Professional
-25%
Разработчик на Spring Framework
-25%
Golang Developer. Professional
-25%
Python Developer. Basic
-25%
iOS Developer. Professional
-25%
Highload Architect
-25%
JavaScript Developer. Basic
-25%
Kotlin Backend Developer
-25%
JavaScript Developer. Professional
-25%
Android Developer. Basic
-25%
Unity Game Developer. Basic
-25%
Разработчик C#
-25%
Программист С Web-разработчик на Python Алгоритмы и структуры данных Framework Laravel PostgreSQL Reverse-Engineering. Professional CI/CD Vue.js разработчик VOIP инженер Программист 1С Flutter Mobile Developer Супер - интенсив по Kubernetes Symfony Framework Advanced Fullstack JavaScript developer Супер-интенсив "Azure для разработчиков"
Инфраструктура
Мониторинг и логирование: Zabbix, Prometheus, ELK
-25%
DevOps практики и инструменты
-25%
Архитектор сетей
-25%
Инфраструктурная платформа на основе Kubernetes
-25%
Супер-интенсив «IaC Ansible»
-16%
Разработчик программных роботов (RPA) на базе UiPath и PIX
-25%
Супер-интенсив "SQL для анализа данных"
-16%
Базы данных Сетевой инженер AWS для разработчиков Cloud Solution Architecture Разработчик голосовых ассистентов и чат-ботов Внедрение и работа в DevSecOps Администратор Linux. Виртуализация и кластеризация Нереляционные базы данных Супер-практикум по использованию и настройке GIT IoT-разработчик Супер-интенсив «ELK»
Специализации Курсы в разработке Подготовительные курсы
+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 комментариев
Для комментирования необходимо авторизоваться
🎁 Максимальная скидка!
Черная пятница уже в OTUS! Скидка -25% на всё!