Перечисление TextAlign

Перечисление TextAlign описывает строки для ключа textAlign у компонента Text. Значение влияет на расположение строк внутри ширины контейнера.

Синтаксис

textAlign: 'center'

Значения

Значение	Описание
`'auto'`	Выравнивание по правилам системы и направления письма.
`'left'`	Текст прижат к левому краю блока.
`'right'`	Текст прижат к правому краю блока.
`'center'`	Строки центрируются по ширине блока.
`'justify'`	Строки растягиваются от края до края, кроме последней.

Значение по умолчанию: 'auto'.

Пример

Давайте выровнять абзац по центру:

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

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

const styles = StyleSheet.create({
	box: {
		width: '100%',
	},
	centered: {
		textAlign: 'center',
	},
});

На экране строка 'abcde' по центру ширины контейнера.

Пример

Давайте сравнить 'left' и 'right':

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

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

const styles = StyleSheet.create({
	box: {
		width: '100%',
	},
	left: {
		textAlign: 'left',
	},
	right: {
		textAlign: 'right',
	},
});

На экране 'abcde' у левого края, '12345' у правого.

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

компонент Text,
который рисует абзац
перечисление FontWeight,
которое задаёт толщину шрифта
перечисление Direction,
которое задаёт направление письма контейнера
компонент View,
который задаёт ширину блока для текста