Текст

color: Color

Цвет текста

<text>Обычный</text>
<text style={{ color: 'red' }}>Красный</text>
<text style={{ color: '#38e' }}>hex код в короткой нотации</text>
<text style={{ color: '#3388ee' }}>hex код в длинной нотации</text>
<text style={{ color: 'rgb(128, 100, 88)' }}>rgb</text>
<text style={{ color: 'rgb(128, 100, 88, 0.5)' }}>rgb с прозрачностью</text>

fontFamily: string

Название семейства шрифта. Возможно задание произвольного шрифта предварительно настроенного через chatiumrc.

Примеры значений: "serif" "sans" "mono" ...наименование шрифта

<text>по-умолчанию</text>
<text style={{ fontFamily: 'sans' }}>sans</text>
<text style={{ fontFamily: 'serif' }}>serif</text>
<text style={{ fontFamily: 'mono' }}>mono</text>

fontSize: number | StandardFontSize

Размер шрифта. Произвольный или заранее определённый. Возможные значения: number, "xs", "sm", "md", "lg", "xl", "2xl", "3xl"

<text style={{ fontSize: 50 }}>50</text>
<text style={{ fontSize: 40 }}>40</text>
<text style={{ fontSize: '3xl' }}>3xl</text>
<text style={{ fontSize: '2xl' }}>2xl</text>
<text style={{ fontSize: 'xl' }}>xl</text>
<text style={{ fontSize: 'lg' }}>lg</text>
<text style={{ fontSize: 'md' }}>md</text>
<text style={{ fontSize: 'sm' }}>sm</text>
<text style={{ fontSize: 'xs' }}>xs</text>

fontStyle

Возможность задать шрифту курсив.

Возможные значения: normal | italic

<text>по-умолчанию</text>
<text style={{ fontStyle: 'normal' }}>normal</text>
<text style={{ fontStyle: 'italic' }}>italic</text>

fontWeight

Жирность шрифта.

Возможные значения: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900

<text style={{ fontWeight: 'normal' }}>normal</text>
<text style={{ fontWeight: 'bold' }}>bold</text>
<text style={{ fontWeight: '100' }}>100</text>
<text style={{ fontWeight: '200' }}>200</text>
<text style={{ fontWeight: '300' }}>300</text>
<text style={{ fontWeight: '400' }}>400</text>
<text style={{ fontWeight: '500' }}>500</text>
<text style={{ fontWeight: '600' }}>600</text>
<text style={{ fontWeight: '700' }}>700</text>
<text style={{ fontWeight: '800' }}>800</text>
<text style={{ fontWeight: '900' }}>900</text>

fontVariant

normal  — обычный шрифт.

tabular-nums  — свойство шрифта при котром все цифры становятся одной ширины.

<text style={{ fontVariant: [ 'tabular-nums' ] }}>1234567890, tabular-nums</text>

letterSpacing: "normal" | number

Междусимвольный интерфал шрифта.

<text style={{ letterSpacing: 'normal' }}>Пример letter spacing: normal</text>
<text style={{ letterSpacing: 1.5 }}>Пример letter spacing: 1.5</text>
<text style={{ letterSpacing: 2 }}>Пример letter spacing: 2</text>

lineClamp: number

Ограничение высоты текста по количеству строк. Избыточный текст обрезается согласно свойству textOverflow.

<text style={{ lineClamp: 3 }}>
  Пример{'\n'}
  line{'\n'}
  clamp{'\n'}
  этот текст является четвёртой строкой и не будет отображён
</text>

lineHeight: "normal" | number

Устанавливает величину пространства отводимого на одну строку текста по высоте.

<text style={{ fontSize: 16 }}>
  Пример lineHeight{'\n'}
  по-умолчанию
</text>

<text style={{ fontSize: 16, lineHeight: 32 }}>
  Пример lineHeight{'\n'}
  вдвое большего чем размер шрифта
</text>

<text style={{ fontSize: 16, lineHeight: 100, lineClamp: 1 }}>
  Пример lineHeight для задания высоты блока и центрирования однострочного текста.
</text>

textAlign

По-умолчанию: auto

Задаёт принцип выравнивания текста. Значение auto задаст выравнивание текста в зависимости от индивидуальных свойств блоков align и alignItems, там где они применимы.

Возможные значения: auto, left, center, right, justify

textAlignVertical

По-умолчанию: top

Выравнивание текста в контейнере по высоте.

Возможные значения: top, center, bottom

textDecorationLine

Добавление к тексту подчеркивания или перечёркивания.

Возможные значения: none, underline, line-through, underline line-through

textOverflow

Способ сокращения текста при выходе за границы контейнера.

Возможные значения: clip, ellipsis

ellipsis — текст обрезается с отображением многоточия.

clip — текст обрезается по границе контейнера. Работает только в паре со свойством lineClamp: 1. В остальных случаях текст орезается в стиле ellipsis.

textShadowColor: Color

Цвет тени текста. Чтобы тень была видна, необходимо так же задать либо textShadowOffset либо textShadowRadius.

<text style={{ textShadowColor: 'red', textShadowOffset: { width: 2, height: 2 } }} >
  Этот текст с красной тенью
</text>

<text style={{ textShadowColor: '#38e', textShadowOffset: { width: 2, height: 2 } }} >
  Этот текст с цветом тени в короткой hex нотации
</text>

<text style={{ textShadowColor: '#3388ee', textShadowOffset: { width: 2, height: 2 } }} >
  Этот текст с цветом тени в длинной hex нотации
</text>

<text style={{ textShadowColor: 'rgb(128, 100, 88)', textShadowOffset: { width: 2, height: 2 } }} >
  Этот текст с цветом тени в rgb
</text>

<text style={{ textShadowColor: 'rgb(128, 100, 88, 0.5)', textShadowOffset: { width: 2, height: 2 } }} >
  Этот текст с цветом тени в rgb с прозрачностью
</text>

textShadowOffset: { width, height }

Смещение тени по горизонтали и вертикали.

width: number

height: number

<text style={{ textShadowColor: 'lightgrey', textShadowOffset: { width: 3, height: 3 } }} >
  Смещение тени width = 3 и height = 3.
</text>

<text style={{ textShadowColor: 'lightgrey', textShadowOffset: { width: -5, height: -2 }, marginTop: 10 }} >
  Смещение тени с отрицательными значениями width = -5 и height = -2.
</text>

textShadowRadius: number

Глубина размытия тени в пикселях.

<text style={{ textShadowRadius: 3 }} >
  Пример с textShadowRadius = 3 без смещения тени.
</text>

<text style={{ textShadowOffset: { width: 3, height: 3 }, textShadowRadius: 3, marginTop: 10 }} >
  Пример с textShadowRadius = 3 и смещением тени width = 3 и height = 3.
</text>

<text style={{ textShadowColor: 'grey', textShadowOffset: { width: 3, height: 3 }, textShadowRadius: 3, marginTop: 10 }} >
  Пример с textShadowRadius = 3, смещением и заданием цвета тени.
</text>

textTransform

Преобразование текста при отображении.

none  — нет преобразования

uppercase  — привести все к верхнему регистру.

lowercase  — привести все к нижнему регистру.

capitalize  — привести к верхнему регистру первые буквы каждого слова.

<text>иСхОдНыЙ тЕкСт ЛеСеНкОй</text>

<text style={{ marginTop: 10 }}>textTransform = 'capitalize':</text>
<text style={{ textTransform: 'capitalize' }}>иСхОдНыЙ тЕкСт ЛеСеНкОй</text>

<text style={{ marginTop: 10 }}>textTransform = 'uppercase':</text>
<text style={{ textTransform: 'uppercase' }}>иСхОдНыЙ тЕкСт ЛеСеНкОй</text>

<text style={{ marginTop: 10 }}>textTransform = 'lowercase':</text>
<text style={{ textTransform: 'lowercase' }}>иСхОдНыЙ тЕкСт ЛеСеНкОй</text>