Работа с компонентом text в React Native

Введение

В React Native компонент text — один из самых часто используемых и фундаментальных компонентов. С его помощью вы отображаете текстовую информацию в мобильных приложениях, создаваемых на этой платформе. От правильного использования и стилизации text напрямую зависит удобство восприятия интерфейса пользователями, возможность реализовать интерактивное поведение, а также соответствие дизайну вашего приложения.

Здесь я расскажу вам, как правильно работать с компонентом text в React Native, рассмотрю примеры использования, особенности вложенности, нюансы ограничения длины текста, событий, поддержки платформ и многое другое. Вы узнаете не только про базовые возможности, но и про типичные ошибки и советы для продвинутых сценариев.

Основные свойства компонента text

Давайте начнем с базовых возможностей. Компонент text очень похож по назначению на <TextView> в Android или <UILabel> в iOS. Он способен отображать строку символов, которую вы укажете как дочерний элемент. Обычно его импортируют так:

import { Text } from 'react-native';

Основной пример:

<Text>Привет, мир!</Text>

Основные props компонента text

Компонент text поддерживает множество свойств (props). Ключевые из них:

• style — управляет внешним видом текста (цвет, размер, шрифты, выравнивание и др.)
• numberOfLines — ограничивает количество отображаемых строк
• ellipsizeMode — отвечает за поведение при обрезании текста (например, добавляет ... в конце строки)
• onPress — обработчик события нажатия
• selectable — позволяет пользователю выделять текст для копирования
• allowFontScaling — управляет масштабированием текста при изменениях в системных настройках

Теперь давайте более подробно рассмотрим каждый из этих props с примерами и пояснениями.

Компонент Text позволяет отображать текст в React Native приложениях. Кастомизация и стилизация текста играют важную роль в создании привлекательного пользовательского интерфейса. Но чтобы добиться идеального внешнего вида текста, необходимо знать особенности работы со шрифтами, отступами и другими параметрами. Если вы хотите детальнее погрузиться в мир React Native и научиться создавать привлекательные текстовые элементы для ваших приложений — приходите на наш большой курс React Native и Expo Router. На курсе 184 уроков и 11 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Стилизация текста

Стилизация текста в React Native осуществляется с помощью свойства style, в которое передается объект стилей или массив стилей.

<Text style={{ color: 'blue', fontSize: 20, fontWeight: 'bold' }}>
  Стилизованный текст
</Text>

В этом примере:

• Цвет текста — синий
• Размер шрифта — 20 sp
• Жирное начертание

Можно объединять несколько стилей:

const baseStyle = {
  fontSize: 18,
  color: '#333',
};

const highlightStyle = {
  backgroundColor: 'yellow',
};

<Text style={[baseStyle, highlightStyle]}>
  Текст с комбинированными стилями
</Text>

Обычные свойства для стиля текста

• fontSize — размер текста;
• color — цвет;
• fontWeight — толщина (например, 'bold', 'normal', '500');
• fontStyle — стиль (например, 'italic');
• fontFamily — имя шрифта;
• textAlign — выравнивание ('left', 'center', 'right', 'justify');
• textDecorationLine — оформление ('underline', 'line-through');
• lineHeight — высота строки;
• letterSpacing и textTransform — управление расстоянием между буквами и преобразованием регистра.

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

Вложенность компонентов text

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

<Text>
  Обычный текст, а <Text style={{ fontWeight: 'bold' }}>этот фрагмент жирный</Text> и
  <Text style={{ color: 'red' }}> этот красный</Text>.
</Text>

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

Ограничение текста по количеству строк

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

<Text numberOfLines={2}>
  Это очень длинный текст, который может не помещаться в своё выделенное место.
  Если задать numberOfLines равным 2, отображаться будут только первые две строки, остальное скрывается.
</Text>

Что делает numberOfLines:

• Если текст больше указанного числа строк, все лишнее прячется.
• В конце последней видимой строки добавляется троеточие (отображение зависит от ОС).

Доступна также настройка поведения при обрезании текста — проп ellipsizeMode. Он может принимать значения: 'head', 'middle', 'tail', 'clip'.

• 'tail' — обрезать с конца, добавить "..." (по умолчанию)
• 'head' — сначала "..."
• 'middle' — "..." посередине строки
• 'clip' — просто обрезать, не добавлять троеточие

Пример:

<Text numberOfLines={1} ellipsizeMode="middle">
  Это строка... которую обрежут посередине
</Text>

Работа с событиями

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

<Text
  style={{ color: 'blue' }}
  onPress={() => alert('Вы нажали на текст!')}
>
  Это кликабельный текст
</Text>

Это полезно, если хотите реализовать ссылку, кнопку или интерактивный элемент прямо в тексте.

Вы также можете использовать обработчик onLongPress для долгого нажатия.

<Text onLongPress={() => alert('Долгое нажатие!')}>
  Зажмите этот текст
</Text>

Если текст необходимо сделать визуально похожим на ссылку, добавьте стили — например, цвет и подчеркивание.

Копирование и выделение текста

Чтобы пользователь мог выделять и копировать текст, используйте prop selectable. По умолчанию текст нельзя выделять, но если это необходимо (для ссылок, номеров, email), добавьте этот параметр:

<Text selectable={true}>
  Выделяемый текст для копирования
</Text>

На Android и iOS выделение работает по-разному.

Масштабирование текста (Font Scaling)

React Native по умолчанию масштабирует текст в зависимости от системных настроек (размера шрифта). Иногда это удобно для доступности, но бывают случаи, когда дизайн не должен меняться.

Отключить масштабирование можно с помощью allowFontScaling:

<Text allowFontScaling={false}>
  Этот текст не будет увеличиваться при изменении системных настроек
</Text>

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

Особенности работы на Android и iOS

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

• На Android свойство selectable работает только на версии Android 5.0+.
• Некоторые шрифты, объявленные через fontFamily, могут быть доступны только на одной платформе.
• Поведение вложенных текстов может отличаться (особенно, если они используются внутри views с разными z-index).
• На iOS по умолчанию text распознает номера телефонов, email, ссылки и автоматически превращает их в интерактивные (при использовании prop dataDetectorType).

Автоматическое определение ссылок, email, телефонов

Разработчики часто сталкиваются с задачей, когда текст должен автоматически распознавать номера телефонов или адреса электронной почты и делать их интерактивными. В iOS вы можете использовать prop dataDetectorType:

<Text dataDetectorType="all">
  Мой сайт: https://example.com, email: test@example.com, телефон: +7 999 123-45-67
</Text>

Значения dataDetectorType: "phoneNumber", "link", "email", "none", "all". На Android это поведение реализуется только во внешних библиотеках.

Сочетание текста и изображений

Иногда возникает задача встроить изображение в строку текста (например, эмодзи, иконка). Компонент text поддерживает вложенные компоненты image внутри себя:

<Text>
  Здесь текст с иконкой
  <Image source={require('./img/icon.png')} style={{ width: 16, height: 16 }} />
</Text>

Обратите внимание: такая возможность корректно работает не во всех версиях React Native и на всех платформах, проверьте поддержку в вашей версии.

Локализация и многоязычный текст

Если ваше приложение поддерживает несколько языков, используйте инструменты интернационализации (например, библиотеку react-i18next). Строчные значения берите из файлов переводов:

import { useTranslation } from 'react-i18next';

const { t } = useTranslation();

<Text>{t('hello_world')}</Text>

Это обеспечивает правильное отображение текста для всех языков.

Обработка длинных текстов и перенос

Дефолтно текст автоматически переносится по словам, если он не уместился на экране. Вы можете управлять этим с помощью свойств:

• numberOfLines: ограничить число отображаемых строк
• ellipsizeMode: управлять появлением троеточия
• adjustsFontSizeToFit: автоматически уменьшать размер шрифта, чтобы текст поместился (поддерживается только на iOS для text)
• minimumFontScale: минимально возможный размер уменьшения шрифта

Например:

<Text numberOfLines={1} adjustsFontSizeToFit minimumFontScale={0.8}>
  Очень длинная строка, которая будет уменьшаться по размеру
</Text>

Обработка пустых и null значений

Если свойство children или значение, которое вы отображаете в text, может быть null или undefined, проверяйте это, чтобы избежать ошибок или появления пустых мест в верстке.

Например:

<Text>{user?.name || 'Имя не указано'}</Text>

Использование custom font (кастомных шрифтов)

Добавить свой шрифт в React Native — несложно, но важно сделать импорт правильно. Сначала копируйте ttf-файлы в папку assets/fonts, затем подключите через fontFamily в стиле:

<Text style={{ fontFamily: 'MyCustomFont' }}>
  Текст с кастомным шрифтом
</Text>

Помните: для Android и iOS имена шрифтов могут отличаться, также не забудьте пройти весь путь настройки в project settings.

Проблемы с переносом строк (\n)

В React Native для переноса строки в тексте используется символ \n:

<Text>
  Первая строка{'\n'}Вторая строка
</Text>

Также перенос можно сделать через интерполяцию:

<Text>
  {`Первая строка
Вторая строка`}
</Text>

Декораторы, mixins и автоматизация оформления текстов

Для унификации стиля или добавления повторяющихся фрагментов удобно обернуть text в функциональный компонент. Пример:

const AppText = ({children, style, ...props}) => (
  <Text style={[{fontSize: 16, color: '#444'}, style]} {...props}>
    {children}
  </Text>
);

// Использование:
<AppText style={{fontWeight: 'bold'}}>Универсальный стиль текста</AppText>

Поддержка accessibility (доступность)

Используйте prop accessible в сочетании с accessibilityLabel, чтобы описывать назначение компонента для скринридеров:

<Text accessible={true} accessibilityLabel="Ошибка: неправильный пароль">
  Неверный пароль!
</Text>

Использование inline-styles против StyleSheet

React Native поддерживает как инлайн-стили, так и стили, оформленные через объект, созданный с помощью StyleSheet.create. Это помогает избежать лишнего пересоздания объектов при каждом рендере и ускоряет приложение.

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  warning: {
    color: 'red',
    fontWeight: 'bold',
    fontSize: 20,
  },
});

<Text style={styles.warning}>Предупреждение!</Text>

Итог

Компонент text — это основа интерфейса React Native-приложений. Вы можете стилизовать текст практически так же гибко, как и на web, пользоваться вложенностью, реализовывать интерактивность, управлять переносом и ограничением, обеспечивать поддержку доступности. Одновременно стоит помнить об ограничениях и отличиях между платформами, особенностях стилизации и масштабирования.

Работа с компонентом Text - это лишь один из аспектов создания качественного пользовательского интерфейса в React Native. Для создания полноценных приложений необходимо знать и другие компоненты, а также уметь их комбинировать и стилизовать. Курс React Native и Expo Router поможет вам в этом. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир React Native прямо сегодня.

Частозадаваемые технические вопросы по теме статьи и ответы на них

В: Как задать разный стиль отдельным словам в одной строке?
О: Вложите несколько компонентов Text с индивидуальными стилями внутри общего Text, вот так: jsx <Text> Общее <Text style={{color: 'red'}}>слово</Text> выделено. </Text>

В: Можно ли отцентрировать текст только по вертикали в Text?
О: Нет, компонент Text не имеет отдельного свойства verticalAlign. Вертикальное выравнивание достигается только при задании высоты и выравнивании через контейнеры View или настройкой lineHeight в стилях Text.
jsx <View style={{height: 50, justifyContent: 'center'}}> <Text>Текст по центру</Text> </View>

В: Почему fontFamily не применяется к тексту на Android или iOS?
О: Убедитесь, что шрифт действительно добавлен в assets, путь к нему прописан в проекте правильно, а в fontFamily указано точное имя шрифта, отображаемое в system info. На Android и iOS возможны разные имена, проверьте их.

В: Как сделать часть текста кликабельной ссылкой (например, одно слово)?
О: Окружите нужное слово компонентом Text и добавьте onPress: jsx <Text> Остальной текст и <Text style={{color: 'blue'}} onPress={...}>ссылка</Text> </Text>

В: Что делать, если текст очень длинный и выходит за пределы экрана?
О: Используйте контейнер ScrollView для прокрутки или ограничивайте numberOfLines и ellipsizeMode, если хотите ограничить текст и показать троеточие.