Вставка переноса строки в <Text> компонент React Native

Быстрый ответ

Для того чтобы вставить перевод строки в компонент <Text> в React Native, воспользуйтесь символом перевода строки \n:

<Text>{"Привет, первая строка\nПривет, вторая строка"}</Text>

Если у вас есть динамический массив строк, то для создания переводов строк объедините элементы с использованием \n:

<Text>{["Привет, первая строка", "Привет, вторая строка"].join('\n')}</Text>

Корректная обработка переводов строк

В отличие от HTML, где перевод строки реализован с помощью тега <br>, в React Native для таких целей используется символ '\n'. Обратите внимание, что \n следует помещать в фигурные скобки {}.

Использование многострочных шаблонных строк

Для создания многострочного текста удобно использовать шаблонные строки ES6, которые сохраняют переводы строк:

<Text>{`Первая строка на связи!
Вторая строка тоже здесь!`}</Text>

Подробнее об этом расскажет наш спикер на видео

Работа со стилевыми свойствами текста

Несмотря на то что в React Native не поддерживается свойство whiteSpace из CSS, свойства flexWrap: 'wrap' и maxWidth очень полезны для автоматического переноса текста на новую строку при достижении заданной максимальной ширины.

Чтобы отобразить код, сохраняя исходное форматирование, воспользуйтесь кастомным текстовым компонентом со следующими стилями:

<Text style={{ fontFamily: 'monospace' }}>
  {`Блок кода:
   
   Без "лжи" слово "верю" не составить!
  `}
</Text>

Не забывайте следить за версией React Native, с которой вы работаете, так как от неё может зависеть доступность той или иной функциональности.

Визуализация

Восприятие текстовых концепций облегчается и примерной аналогии с поездами и станциями:

[ 🚂 Текст (Поезд) | 🛤️ Прямые Пути (Содержание) ]

Символ перевода строки \n можно представить как остановку, которая позволит тексту начать новую строку – выбрать новый путь:

[ 🚂 Текст (Поезд) ]
[ 🚉 `\n` (Станция перевода строки) ]
[ 🚃 Текст (Новый вагон) ]

Учёт исключений и применение стилей

Для трансформации данных из веб-API, где целевые теги <br/>, в строковые переводы, можно использовать следующий код:

const textWithLineBreaks = yourTextFromApi.replace(/<br\/?>/g, '\n');
<Text>{textWithLineBreaks}</Text>

Свойство maxWidth позволяет управлять максимальной длиной текстового блока, что может уменьшить необходимость ручного ввода переносов строк:

<Text style={{ maxWidth: 200 }}>
  {"Стремлюсь к звездам, но застрял на maxWidth!"}
</Text>

Предотвращение ошибок

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

Полезные материалы

1. Text · React Native — Здесь вы найдете более подробную информацию о компоненте <Text>.
2. GitHub – vhpoet/react-native-styling-cheat-sheet — Путеводитель по стилям в React Native.
3. The Full React Native Layout Cheat Sheet | by Dror Biran | Wix Engineering | Medium — Обширное руководство по работе с flexbox.
4. white-space | CSS-Tricks — Немного теории о том, как управлять пробелами и переносами строк.