ReactNative — стиль placeholder’а | OTUS
⚡ Открываем подписку на курсы!
Проходите параллельно 3 онлайн-курса в месяц по цене одного.
Подробнее

Курсы

Программирование
Backend-разработчик на PHP Scala-разработчик Алгоритмы и структуры данных Backend-разработка на Kotlin Team Lead Разработчик Python. Базовый курс C# ASP.NET Core разработчик
-25%
iOS-разработчик. Базовый курс
-25%
Супер - интенсив по паттернам проектирования
-16%
Мобильная разработка на Flutter
-15%
React.js разработчик
-12%
MS SQL Server разработчик Нереляционные базы данных
-17%
VOIP инженер Базы данных Fullstack разработчик JavaScript AWS для разработчиков Cloud Solution Architecture Разработчик игр на Unity Архитектура и шаблоны проектирования Agile Project Manager в IT Интенсив «Оптимизация в Java» Супер - интенсив по Kubernetes
Специализации Курсы в разработке Подготовительные курсы
+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 комментариев
Для комментирования необходимо авторизоваться