0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: мобильная разработка, reactnative, placeholder, textinput, textinputplaceholderstyle, стиль текста</p>
1
<p>Теги: мобильная разработка, reactnative, placeholder, textinput, textinputplaceholderstyle, стиль текста</p>
2
<p>Недавно возникла проблема, что у основного текста и у placeholder в дизайне разные стили:</p>
2
<p>Недавно возникла проблема, что у основного текста и у placeholder в дизайне разные стили:</p>
3
<p><strong>TextInput</strong>позволяет изменять стиль основного текста и задавать цвет для<strong>placeholder</strong>. Однако изменить размер или шрифт невозможно. Мы видим, что свойства "placeholderStyle" нет.</p>
3
<p><strong>TextInput</strong>позволяет изменять стиль основного текста и задавать цвет для<strong>placeholder</strong>. Однако изменить размер или шрифт невозможно. Мы видим, что свойства "placeholderStyle" нет.</p>
4
<p>В такой ситуации нам приходится брать всё в свои руки и расширять этот компонент.</p>
4
<p>В такой ситуации нам приходится брать всё в свои руки и расширять этот компонент.</p>
5
<h2>Алгоритм действий</h2>
5
<h2>Алгоритм действий</h2>
6
<p>1.Создадим компонент<strong>TextInputPlaceholderStyle</strong>и пробросим вниз свойства. Сейчас наш компонент просто дублирует<strong>TextInput</strong>.</p>
6
<p>1.Создадим компонент<strong>TextInputPlaceholderStyle</strong>и пробросим вниз свойства. Сейчас наш компонент просто дублирует<strong>TextInput</strong>.</p>
7
<p>2.Заведём флаг в состоянии, который будет определять, показывается placeholder сейчас или нет.</p>
7
<p>2.Заведём флаг в состоянии, который будет определять, показывается placeholder сейчас или нет.</p>
8
<p>3.Опишем функцию, которая будет изменять это состояние и используем её (не забываем о том, что<strong>onChange</strong>может так же передаваться как свойство, и нам надо её вызвать).</p>
8
<p>3.Опишем функцию, которая будет изменять это состояние и используем её (не забываем о том, что<strong>onChange</strong>может так же передаваться как свойство, и нам надо её вызвать).</p>
9
<p>4.В зависимости от состояния компонента используем обычный style или<strong>placeholderStyle</strong>.</p>
9
<p>4.В зависимости от состояния компонента используем обычный style или<strong>placeholderStyle</strong>.</p>
10
<p>5.Пример использования:</p>
10
<p>5.Пример использования:</p>
11
<p>6.Если вы используете<strong>TypeScript</strong>, важно сохранить типизацию этого компонента, добавив свойство placeholderStyle.</p>
11
<p>6.Если вы используете<strong>TypeScript</strong>, важно сохранить типизацию этого компонента, добавив свойство placeholderStyle.</p>
12
12