Я хочу вставить новую строку (например, \ r \ n, <br />) в компонент Text в React Native.
Если бы у меня был:
<text><br />
Hi~<br >
this is a test message.<br />
</text>
Тогда React Native оказывает Hi~ this is a test message.
Можно ли визуализировать текст для добавления новой строки, например так:
Hi~
this is a test message.
javascript
text
react-native
newline
Curtis
источник
источник
\n
где вы хотите, чтобы разорвать линию.Ответы:
Это должно сделать это:
источник
<Text>{content}</Text>
:?var Br = React.createClass({ render() { return ( <Text> {"\n"}{"\n"} </Text> ) } })
<Text>{comments}</Text>
Мы не можем использовать{\n}
логику там. Тогда как?<Component text={"Line1\nLine2"} />
вместо<Component text="Line1\nLine2" />
(обратите внимание на добавленные фигурные скобки)Вы также можете сделать:
На мой взгляд, проще, потому что вам не нужно вставлять что-то в строку; просто оберните его один раз, и он сохранит все ваши разрывы строк.
источник
white-space: pre-line;
Использование:
Результат:
источник
Это сработало для меня
(реакция-нативная 0,41,0)
источник
Если вы вообще отображаете данные из переменных состояния, используйте это.
источник
Вы можете использовать
{'\n'}
как разрывы строк. Привет ~ {'\ n'} это тестовое сообщение.источник
Еще лучше: если вы используете
styled-components
, вы можете сделать что-то вроде этого:источник
Вы можете попробовать использовать вот так
источник
Мне нужно было однострочное ветвление решения в троичном операторе, чтобы мой код был хорошо с отступом.
Превосходная подсветка синтаксиса помогает выделить символ перевода строки:
источник
Вы можете использовать `` так:
источник
Вы можете сделать это следующим образом:
{'Создать \ nВаш аккаунт'}
источник
Вы также можете просто добавить его как константу в свой метод рендеринга, чтобы его было легко использовать
источник
Просто поместите
{'\n'}
в текстовый тегисточник
Одним из самых чистых и гибких способов было бы использование литералов шаблонов .
Преимущество использования этого заключается в том, что если вы хотите отобразить содержимое строковой переменной в текстовом теле, оно будет более понятным и понятным.
(Обратите внимание на использование символов обратного хода)
Приведет к
источник
В случае, если кто-то ищет решение, в котором вы хотите иметь новую строку для каждой строки в массиве, вы можете сделать что-то вроде этого:
Смотрите закуски для живого примера: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example
источник
Просто используйте {"\ n"} там, где вы хотите разбить строку
источник
Другой способ вставить
<br>
между текстовыми строками, которые определены в массиве:Тогда текст можно использовать как переменную:
Если не доступно,
Fragment
может быть определено следующим образом:источник
https://stackoverflow.com/a/44845810/10480776 @ Edison D'souza ответил именно на то, что я искал. Однако он заменял только первое вхождение строки. Вот мое решение для обработки нескольких
<br/>
тегов:Извините, я не смог прокомментировать его сообщение из-за ограничения оценки репутации.
источник
Вот решение для React (не React Native) с использованием TypeScript.
Та же концепция может быть применена к React Native
Использование:
Вывод:
источник
Использовать
\n
в тексте и CSSwhite-space: pre-wrap;
источник
whiteSpace
списке React Native Text Style Prop . Обратите внимание, что это не HTML.