Comment puis-je insérer un saut de ligne dans un composant texte de Réagir Natif?
Je veux insérer une nouvelle ligne (comme rn
) dans un composant Texte de Réagir Natif.
Si j'ai:
<text><br />
Hi~<br >
this is a test message.<br />
</text>
Alors React rend natif Hi~ this is a test message.
Est-il possible de rendre le texte pour ajouter une nouvelle ligne comme ceci:
Hi~
this is a test message.
10 réponses
Je ne peux pas le tester en ce moment mais cela devrait le faire:
<Text>
Hi~{"\n"}
this is a test message.
</Text>
Vous pouvez également faire:
<Text>{`
Hi~
this is a test message.
`}</Text>
Plus facile à mon avis, parce que vous n'avez pas besoin d'insérer des choses dans la chaîne; il suffit de l'envelopper une fois et il garde tous vos sauts de ligne.
Cela a fonctionné pour moi
<Text>{`Hi~\nthis is a test message.`}</Text>
(réaction de-native 0.41.0)
Utilisation:
<Text>{`Hi,\nCurtis!`}</Text>
Résultat:
Salut,
Curtis!
Vous pouvez utiliser {[0] } comme sauts de ligne. Salut~ {'\n'} ceci est un message de test.
Si vous affichez des données à partir de variables d'état, utilisez ceci.
<Text>{this.state.user.bio.replace('<br/>', '\n')}</Text>
J'avais besoin d'une solution à une ligne branchée dans un opérateur ternaire pour garder mon code bien indenté.
{foo ? `First line of text\nSecond line of text` : `Single line of text`}
La coloration syntaxique Sublime permet de mettre en évidence le caractère de saut de ligne:
, Vous pouvez essayer d'utiliser comme ceci
<text>{`${val}\n`}</text>
Utiliser \n dans le texte et css white-space: pre-wrap;
Ajout d'une balise de fermeture du saut de ligne jsx semblait fonctionner pour moi.
<text>First Line<br></br>Second Line</text>
Sortie:
First Line
Second Line