Come posso inserire un'interruzione di riga in un componente di testo in React Native?

Question

Voglio inserire una nuova riga (come \ r \ n, < br/>) in un componente di testo in React Native.

Se ho:

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

Poi Reagire nativo rende Hi~ this is a test message.

E 'possibile rendere il testo per aggiungere una nuova riga in questo modo:

Hi~ 
this is a test message. 

Answer 1

non posso provarlo in questo momento ma questo dovrebbe farlo:

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

Demo here

Answer 2

Si può anche fare:

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

Più facile a mio parere, perché non c'è bisogno di inserire roba all'interno della stringa; basta avvolgerlo una volta e mantiene tutte le interruzioni di riga.

Answer 3

questo ha lavorato per me

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

(reagirà-native 0.41.0)

Answer 4

avevo bisogno di una soluzione one-line ramificazione in un operatore ternario per mantenere il mio codice ben rientrato.

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

Sublime evidenziazione della sintassi aiuta evidenziare il carattere di interruzione di riga:

Answer 5

Se a tutto si visualizzano i dati da variabili di stato, utilizzare questo.

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

Answer 6

Alla fine della stringa è possibile aggiungere .replace. per esempio.

<Text style={styles.cellTitle} numberOfLines={2}> 
    {item.name.replace('\n', ' ')} 
</Text> 

Questo sostituirà \ n con spazio singolo.

Answer 7

È possibile utilizzare {'\n'} come interruzioni di riga. Ciao ~ {'\ n'} questo è un messaggio di prova.