ReactNative — стиль placeholder’а | OTUS

Курсы

Курсы в разработке Подготовительные курсы
Работа в компаниях Компаниям Блог +7 499 110-61-65

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 комментариев
Для комментирования необходимо авторизоваться