Текст

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

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

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

• Компонент функциональный
• Компонент класса

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

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

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

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

Контейнеры

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

<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, как показано ниже:

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

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

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

// 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 для других типов текста.

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

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

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

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

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

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

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

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

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

Справочник

Свойства

accessibilityHint

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

accessibilityLanguage

iOS

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

См. документацию iOS accessibilityLanguage для получения дополнительной информации.

accessibilityLabel

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

accessibilityRole

Сообщает экранному диктору рассматривать текущий фокусируемый элемент как имеющий определённую роль.

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

В Android эти роли имеют аналогичную функциональность в TalkBack, как добавление атрибутов доступности в Voiceover в iOS

accessibilityState

Сообщает экранному диктору рассматривать текущий фокусируемый элемент как находящийся в определённом состоянии.

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

accessibilityActions

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

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

onAccessibilityAction

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

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

accessible

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

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

adjustsFontSizeToFit

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

allowFontScaling

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

android_hyphenationFrequency

Android

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

dataDetectorType

Android

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

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

disabled

Android

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

ellipsizeMode

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

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

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

В Android, когда numberOfLines установлено значение, большее, чем 1, только значение tail будет работать корректно.

maxFontSizeMultiplier

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

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

minimumFontScale

iOS

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

nativeID

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

numberOfLines

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

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

onLayout

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

onLongPress

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

onMoveShouldSetResponder

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

onPress

Эта функция вызывается при нажатии.

onResponderGrant

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

onResponderMove

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

onResponderRelease

Вызывается в конце касания.

onResponderTerminate

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

onResponderTerminationRequest

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

onStartShouldSetResponderCapture

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

onTextLayout

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

pressRetentionOffset

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

selectable

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

selectionColor

Android

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

style

suppressHighlighting

iOS

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

testID

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

textBreakStrategy

Android

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

Определения типов

TextLayout

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

Пример

{
    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 , соответствующий каждой отображаемой строке текста.

Пример

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

Свойства