Как вставить разрыв строки в текстовый компонент в React Native?

Я хочу вставить новую строку (например, rn,
) в текстовый компонент в React Native.

Если у меня есть:

<text><br />
Hi~<br >
this is a test message.<br />
</text>

затем реагировать родной рендеры Hi~ this is a test message.

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

Hi~
this is a test message.
133
javascript newline react-native text

10 ответов

Я не могу проверить это прямо сейчас, но это должно сделать это:

<Text>
Hi~{"\n"}
this is a test message.
</Text>
321

вы также можете сделать:

<Text>{`
Hi~
this is a test message.
`}</Text>

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

48

это сработало для меня 

<Text>{`Hi~\nthis is a test message.`}</Text>

(react-native 0.41.0)

9

использование:

<Text>{`Hi,\nCurtis!`}</Text>

результат:

Привет,

Кертис!

7

можно использовать {'\n'} как разрывы строк. Привет~ {'\n'} это тестовое сообщение.

3

Если вы вообще отображаете данные из переменных состояния, используйте это.

<Text>{this.state.user.bio.replace('<br/>', '\n')}</Text>
2

Мне нужно было однострочное решение, ветвящееся в тернарном операторе, чтобы мой код был хорошо отступом. 

{foo ? `First line of text\nSecond line of text` : `Single line of text`}

подсветка синтаксиса Sublime помогает выделить символ разрыва строки:

Sublime syntax highlight

1

вы можете попробовать использовать такой 

<text>{`${val}\n`}</text>
0

использовать \n в тексте и css white-space: pre-wrap;

-2

добавление закрывающего тега к разрыву строки jsx, казалось, работало для меня.

<text>First Line<br></br>Second Line</text>

выход:

First Line Second Line

-3