Компонент Text

Компонент Text выводит текст внутри родителя View или другого Text. Вложенный Text наследует стиль родительского текста, если ключ не переопределён. Внешний вид задаёт параметр style. Параметр numberOfLines ограничивает число строк, лишний хвост обрезается вместе с ellipsizeMode.

Синтаксис

<Text>abcde</Text>

Параметры

Параметр	Описание
`children`	Строка, число или вложенные элементы `Text`.
`style`	Объект стиля текста: размер, цвет, начертание и выравнивание. Объект собирают через класс `StyleSheet`.
`numberOfLines`	Максимум строк на экране. При переполнении хвост обрезают.
`ellipsizeMode`	Как показать обрезку при `numberOfLines`. Строка из перечисления `EllipsizeMode`.
`onPress`	Обработчик нажатия по тексту.
`selectable`	Разрешает выделение и копирование текста пользователем.

Ключи стиля

Ключи ниже пишут внутри объекта style, а не отдельными параметрами Text. Ключ fontSize задаёт высоту шрифта в логических пикселях. Ключ lineHeight задаёт расстояние между базовыми линиями соседних строк. Ключ letterSpacing добавляет зазор между символами. Ключ color задаёт цвет символов, например '#112233'.

Ключ fontWeight берёт строку из перечисления FontWeight. Ключ fontStyle берёт значение из FontStyle. Ключ textAlign выравнивает абзац по значениям TextAlign. Ключ textDecorationLine рисует линию под или через текст по TextDecorationLine. Ключ textTransform меняет регистр букв по TextTransform.

Давайте соберём стиль с размером, цветом и выравниванием:

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
	return (
		<View>
			<Text style={styles.body}>abcde</Text>
		</View>
	);
}

const styles = StyleSheet.create({
	body: {
		fontSize: 18,
		lineHeight: 24,
		letterSpacing: 1,
		color: '#112233',
		fontWeight: '600',
		fontStyle: 'normal',
		textAlign: 'center',
		textDecorationLine: 'none',
		textTransform: 'none',
	},
});

На экране одна строка 'abcde' по центру с заданным размером и цветом.

Пример

Давайте вложим текст с другим начертанием:

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
	return (
		<View>
			<Text style={styles.base}>
				abcde
				<Text style={styles.bold}>12345</Text>
			</Text>
		</View>
	);
}

const styles = StyleSheet.create({
	base: {
		fontSize: 16,
		color: '#112233',
	},
	bold: {
		fontWeight: 'bold',
	},
});

На экране общий фрагмент: 'abcde' обычным начертанием и '12345' жирнее.

Пример

Давайте обрежем длинную строку двумя строками:

import { View, Text } from 'react-native';

export default function App() {
	return (
		<View>
			<Text numberOfLines={2} ellipsizeMode="tail">
				abcde abcde abcde abcde abcde abcde abcde abcde
			</Text>
		</View>
	);
}

На экране не больше двух строк, конец заменён многоточием.

Смотрите также

компонент View,
который держит дочерние элементы
класс StyleSheet,
который собирает объект стиля
перечисление FontWeight,
которое задаёт толщину шрифта
перечисление EllipsizeMode,
которое описывает обрезку длинного текста