Text¶

Text - компонент React для отображения текста.

Text поддерживает вложенность, стилизацию и обработку касаний.

В следующем примере вложенные заголовок и основной текст наследуют fontFamily от styles.baseText, но заголовок предоставляет свои собственные дополнительные стили. Заголовок и тело будут накладываться друг на друга из-за буквальных новых строк:

Вложенный текст¶

И Android, и iOS позволяют отображать форматированный текст путем аннотирования диапазонов строки с определенным форматированием, например, жирным или цветным текстом (NSAttributedString на iOS, SpannableString на Android). На практике это очень утомительно. В React Native мы решили использовать для этого веб-парадигму, где вы можете вложить текст для достижения того же эффекта.

За кулисами React Native преобразует это в плоскую NSAttributedString или SpannableString, которая содержит следующую информацию:

1
2
3

"I am bold and red"
0-9: bold
9-17: bold, red

Контейнеры¶

Элемент <Text> уникален с точки зрения компоновки: все, что находится внутри него, больше не использует компоновку Flexbox, а использует компоновку текста. Это означает, что элементы внутри <Text> больше не являются прямоугольниками, а заворачиваются, когда видят конец строки.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<Text>
  <Text>First part and </Text>
  <Text>second part</Text>
</Text>
// Text container: the text will be inline if the space allowed it
// |First part and second part|

// otherwise, the text will flow as if it was one
// |First part |
// |and second |
// |part       |

<View>
  <Text>First part and </Text>
  <Text>second part</Text>
</View>
// View container: each text is its own block
// |First part and|
// |second part   |

// otherwise, the text will flow in its own block
// |First part |
// |and        |
// |second part|

Ограниченное наследование стиля¶

В Интернете обычный способ установить семейство и размер шрифта для всего документа — это воспользоваться унаследованными свойствами CSS, например, такими:

1
2
3
4
5
6

html {
    font-family: 'lucida grande', tahoma, verdana, arial,
        sans-serif;
    font-size: 11px;
    color: #141823;
}

Все элементы в документе наследуют этот шрифт, если только они или один из их родителей не укажет новое правило.

В React Native мы более строги к этому: Вы должны обернуть все текстовые узлы внутри компонента <Text>. Вы не можете располагать текстовый узел непосредственно под <View>.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// BAD: will raise exception, can't have a text node as child of a <View>
<View>
  Some text
</View>

// GOOD
<View>
  <Text>
    Some text
  </Text>
</View>

Вы также теряете возможность установить шрифт по умолчанию для всего поддерева. Между тем, fontFamily принимает только одно имя шрифта, что отличается от font-family в CSS. Рекомендуемый способ использования согласованных шрифтов и размеров в приложении — создать компонент MyAppText, который включает их, и использовать этот компонент в приложении. Вы также можете использовать этот компонент для создания более специфических компонентов, таких как MyAppHeaderText, для других видов текста.

1
2
3
4
5
6
7
8
9

<View>
    <MyAppText>
        Text styled with the default font for the entire
        application
    </MyAppText>
    <MyAppHeaderText>
        Text styled as a header
    </MyAppHeaderText>
</View>

Если предположить, что MyAppText — это компонент, который только рендерит свои дочерние элементы в компонент Text со стилизацией, то MyAppHeaderText можно определить следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

class MyAppHeaderText extends Component {
    render() {
        return (
            <MyAppText>
                <Text style={{ fontSize: 20 }}>
                    {this.props.children}
                </Text>
            </MyAppText>
        );
    }
}

Составление MyAppText таким образом гарантирует, что мы получим стили от компонента верхнего уровня, но оставляет нам возможность добавлять / переопределять их в конкретных случаях использования.

В React Native все еще существует концепция наследования стилей, но она ограничена текстовыми поддеревьями. В данном случае вторая часть будет и жирной, и красной.

1
2
3
4

<Text style={{ fontWeight: 'bold' }}>
    I am bold
    <Text style={{ color: 'red' }}>and red</Text>
</Text>

Мы считаем, что такой более ограниченный способ стилизации текста позволит создавать более качественные приложения:

• (Разработчик) Компоненты React разработаны с учетом сильной изоляции: Вы должны иметь возможность поместить компонент в любое место вашего приложения, будучи уверенным, что до тех пор, пока пропсы одинаковы, он будет выглядеть и вести себя одинаково. Свойства текста, которые могут быть унаследованы от других пропсов, нарушат эту изоляцию.

• (Реализатор) Реализация React Native также упрощена. Нам не нужно иметь поле fontFamily на каждом отдельном элементе, и нам не нужно потенциально обходить дерево до корня каждый раз, когда мы отображаем текстовый узел. Наследование стиля кодируется только в родном компоненте Text и не просачивается в другие компоненты или саму систему.

Свойства¶

accessibilityHint¶

Подсказка доступности помогает пользователям понять, что произойдет, когда они выполнят действие над элементом доступности, если результат не ясен из метки доступности.

accessibilityLanguage ¶

Значение, указывающее, какой язык должен использоваться программой чтения с экрана при взаимодействии пользователя с элементом. Оно должно соответствовать спецификации BCP 47.

Дополнительную информацию см. в iOS accessibilityLanguage doc.

accessibilityLabel¶

Переопределяет текст, который считывается программой чтения с экрана, когда пользователь взаимодействует с элементом. По умолчанию метка строится путем обхода всех дочерних элементов и накопления всех узлов Text, разделенных пробелом.

accessibilityRole¶

Указывает программе чтения экрана рассматривать текущий элемент, на котором сосредоточено внимание, как имеющий определенную роль.

В iOS эти роли отображаются на соответствующие черты доступности. Кнопка изображения имеет ту же функциональность, что и в случае, когда для трейта установлены значения 'image' и 'button'. Дополнительную информацию см. в Руководстве по доступности.

accessibilityState¶

Указывает программе чтения экрана рассматривать элемент, на котором сфокусировано внимание, как находящийся в определенном состоянии.

Вы можете указать одно состояние, отсутствие состояния или несколько состояний. Состояния должны быть переданы через объект. Например: {selected: true, disabled: true}.

accessibilityActions¶

Действия доступности позволяют ассистивной технологии программно вызывать действия компонента. Свойство accessibilityActions должно содержать список объектов действий. Каждый объект действия должен содержать имя поля и метку.

Дополнительную информацию см. в Руководстве по доступности.

onAccessibilityAction¶

Вызывается, когда пользователь выполняет действия по обеспечению доступности. Единственным аргументом этой функции является событие, содержащее имя выполняемого действия.

Дополнительную информацию см. в Руководстве по доступности.

accessible¶

Если установлено значение true, указывает, что представление является элементом доступности.

Дополнительную информацию см. в Руководстве по доступности.

adjustsFontSizeToFit¶

Указывает, следует ли автоматически уменьшать масштаб шрифтов для соответствия заданным стилевым ограничениям.

allowFontScaling¶

Указывает, должны ли шрифты масштабироваться с учетом настроек доступности Text Size.

android_hyphenationFrequency ¶

Устанавливает частоту использования автоматического дефиса при определении разрыва слов на Android API Level 23+.

aria-busy¶

Указывает на то, что элемент изменяется и что вспомогательные технологии могут захотеть подождать, пока изменения не будут завершены, прежде чем информировать пользователя об обновлении.

aria-checked¶

Указывает состояние элемента с флажком. Это поле может принимать либо булево значение, либо строку "mixed" для представления смешанных флажков.

aria-disabled¶

Указывает, что элемент воспринимается, но отключен, поэтому его нельзя редактировать или использовать иным образом.

aria-expanded¶

Указывает, является ли расширяемый элемент в данный момент развернутым или свернутым.

aria-label¶

Определяет строковое значение, которое маркирует интерактивный элемент.

aria-selected¶

Указывает, выбран ли выбираемый элемент в данный момент или нет.

dataDetectorType ¶

Определяет типы данных, преобразуемых в кликабельные URL-адреса в текстовом элементе. По умолчанию типы данных не определяются.

Вы можете указать только один тип.

disabled ¶

Указывает отключенное состояние текстового представления для целей тестирования.

dynamicTypeRamp ¶

Рампа Dynamic Type, применяемая к этому элементу на iOS.

ellipsizeMode¶

Когда задано numberOfLines, этот пропс определяет, как будет усечен текст. numberOfLines должен быть установлен в сочетании с этим пропсом.

Это может быть одно из следующих значений:

• head — Строка отображается так, чтобы конец помещался в контейнер, а отсутствующий текст в начале строки обозначается глифом многоточия. например, "...wxyz".
• middle — строка отображается так, что начало и конец помещаются в контейнер, а отсутствующий текст в середине обозначается глифом многоточия. "ab...yz"
• tail — Строка отображается так, что начало помещается в контейнер, а пропущенный текст в конце строки обозначается многоточием. например, "abcd...".
• clip — Линии не выводятся за край текстового контейнера.

id¶

Используется для определения местоположения этого представления из нативного кода. Имеет приоритет над пропсом nativeID.

maxFontSizeMultiplier¶

Определяет наибольший возможный масштаб, которого может достичь шрифт, если включено allowFontScaling. Возможные значения:

• null/undefined: наследование от родительского узла или глобального значения по умолчанию (0)
• 0: нет максимального значения, игнорировать родительское/глобальное значение по умолчанию
• >= 1: устанавливает maxFontSizeMultiplier этого узла в данное значение

minimumFontScale ¶

Определяет наименьший возможный масштаб, которого может достичь шрифт, когда включена функция adjustsFontSizeToFit. (значения 0.01 - 1.0).

nativeID¶

Используется для определения местоположения этого представления из нативного кода.

numberOfLines¶

Используется для усечения текста многоточием после вычисления расположения текста, включая обводку строк, таким образом, чтобы общее количество строк не превышало данного числа. Установка этого свойства в 0 приведет к снятию этого значения, что означает, что ограничение на количество строк применяться не будет.

Этот параметр обычно используется с ellipsizeMode.

onLayout¶

Вызывается при монтировании и при смене раскладки.

onLongPress¶

Эта функция вызывается при длительном нажатии.

onMoveShouldSetResponder¶

Хочет ли это представление "претендовать" на отзывчивость на прикосновение? Это вызывается для каждого движения прикосновения к View, когда он не является ответчиком.

onPress¶

Функция, вызываемая при нажатии кнопки пользователем, срабатывает после onPressOut.

onPressIn¶

Вызывается сразу же при задействовании касания, перед onPressOut и onPress.

onPressOut¶

Вызывается, когда прикосновение отпускается.

onResponderGrant¶

Представление теперь реагирует на события прикосновения. Сейчас самое время выделить и показать пользователю, что происходит.

onResponderMove¶

Пользователь перемещает свой палец.

onResponderRelease¶

Уволен в конце касания.

Ответчик был забран из View. Может быть взят другими представлениями после вызова onResponderTerminationRequest, или может быть взят ОС без запроса (например, происходит с центром управления/центром уведомлений на iOS).

onResponderTerminationRequest¶

Какой-то другой View хочет стать отвечающим и просит этот View освободить его отвечающего. Возврат true позволяет освободить его.

onStartShouldSetResponderCapture¶

Если родительский View хочет предотвратить превращение дочернего View в ответчика при запуске касания, он должен иметь этот обработчик, который возвращает true.

onTextLayout¶

Вызывается при изменении макета текста.

pressRetentionOffset¶

Когда вид прокрутки отключен, этот параметр определяет, насколько далеко ваше прикосновение может отойти от кнопки, прежде чем кнопка будет деактивирована. После деактивации попробуйте переместить ее обратно, и вы увидите, что кнопка снова активирована! Переместите ее вперед-назад несколько раз, пока вид прокрутки отключен. Убедитесь, что вы передаете константу, чтобы уменьшить выделение памяти.

role¶

role передает назначение компонента пользователю вспомогательной технологии. Имеет приоритет над пропсом accessibilityRole.

selectable¶

Позволяет пользователю выбрать текст, чтобы использовать встроенную функцию копирования и вставки.

selectionColor ¶

Цвет выделения текста.

style¶

suppressHighlighting ¶

Если true, то при нажатии на текст не происходит никаких визуальных изменений. По умолчанию при нажатии на текст выделяется серый овал.

testID¶

Используется для размещения этого представления в сквозных тестах.

textBreakStrategy ¶

Установка стратегии разбиения текста на Android API Level 23+, возможные значения simple, highQuality, balanced.

userSelect¶

Позволяет пользователю выделять текст и использовать встроенные функции копирования и вставки. Имеет приоритет перед пропсом selectable.

lineBreakStrategyIOS ¶

Установка стратегии перевода строки на iOS 14+. Возможные значения: none, standard, hangul-word и push-out.

Определения типа¶

TextLayout¶

Объект TextLayout является частью обратного вызова TextLayoutEvent и содержит данные измерения для строки Text.

Пример

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
    capHeight: 10.496,
    ascender: 14.624,
    descender: 4,
    width: 28.224,
    height: 18.624,
    xHeight: 6.048,
    x: 0,
    y: 0
}

Свойства

TextLayoutEvent¶

Объект TextLayoutEvent возвращается в обратном вызове в результате изменения компоновки компонента. Он содержит ключ lines со значением, которое представляет собой массив, содержащий объект TextLayout, соответствующий каждой отрисованной строке текста.

Пример

1
2
3
4
5
6
7
8

{
    lines: [
        TextLayout,
        TextLayout,
        // ...
    ];
    target: 1127;
}

Свойства

Комментарии