Ich möchte eine neue Zeile (wie \ r \ n, <br />) in eine Textkomponente in React Native einfügen.
Wenn ich habe:
<text><br />
Hi~<br >
this is a test message.<br />
</text>
Dann wird React Native gerendert Hi~ this is a test message.
Ist es möglich, Text zu rendern, um eine neue Zeile wie folgt hinzuzufügen:
Hi~
this is a test message.
javascript
text
react-native
newline
Curtis
quelle
quelle
\n
wo Sie die Linie brechen möchten.Antworten:
Dies sollte es tun:
quelle
<Text>{content}</Text>
?var Br = React.createClass({ render() { return ( <Text> {"\n"}{"\n"} </Text> ) } })
<Text>{comments}</Text>
Wir können die{\n}
Logik dort nicht verwenden . Wie dann?<Component text={"Line1\nLine2"} />
<Component text="Line1\nLine2" />
Sie können auch:
Meiner Meinung nach einfacher, weil Sie keine Inhalte in die Zeichenfolge einfügen müssen. Wickeln Sie es einfach einmal ein und es behält alle Ihre Zeilenumbrüche bei.
quelle
white-space: pre-line;
Verwenden:
Ergebnis:
quelle
Das hat bei mir funktioniert
(reaktionsnativ 0,41,0)
quelle
Wenn Sie überhaupt Daten aus Statusvariablen anzeigen, verwenden Sie diese.
quelle
Sie können
{'\n'}
als Zeilenumbrüche verwenden. Hi ~ {'\ n'} Dies ist eine Testnachricht.quelle
Besser noch: Wenn Sie verwenden
styled-components
, können Sie so etwas tun:quelle
Sie können versuchen, so zu verwenden
quelle
Ich brauchte eine einzeilige Lösung, die in einen ternären Operator verzweigt, um meinen Code gut eingerückt zu halten.
Durch die Hervorhebung der erhabenen Syntax wird das Zeilenumbruchzeichen hervorgehoben:
quelle
Sie können `` wie folgt verwenden:
quelle
Sie können dies wie folgt tun:
{'Create \ nIhr Konto'}
quelle
Sie können es auch einfach als Konstante in Ihre Rendermethode einfügen, damit es einfach wiederverwendet werden kann:
quelle
Einfach
{'\n'}
in das Text-Tag einfügenquelle
Eine der saubersten und flexibelsten Möglichkeiten wäre die Verwendung von Vorlagenliteralen .
Ein Vorteil dieser Funktion ist, dass der Inhalt der Zeichenfolgenvariablen im Textkörper sauberer und unkomplizierter angezeigt werden soll, wenn Sie ihn anzeigen möchten.
(Bitte beachten Sie die Verwendung von Backtick-Zeichen)
Würde dazu führen
quelle
Wenn jemand nach einer Lösung sucht, bei der Sie für jede Zeichenfolge in einem Array eine neue Zeile haben möchten, können Sie Folgendes tun:
Ein Live-Beispiel finden Sie unter Snack: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example
quelle
Verwenden Sie einfach {"\ n"}, wo Sie die Linie brechen möchten
quelle
Eine andere Möglichkeit,
<br>
zwischen Textzeilen einzufügen , die in einem Array definiert sind:Dann kann der Text als Variable verwendet werden:
Wenn nicht verfügbar,
Fragment
kann folgendermaßen definiert werden:quelle
https://stackoverflow.com/a/44845810/10480776 @Edison D'souzas Antwort war genau das, wonach ich gesucht habe. Es wurde jedoch nur das erste Vorkommen der Zeichenfolge ersetzt. Hier war meine Lösung für den Umgang mit mehreren
<br/>
Tags:Entschuldigung, ich konnte seinen Beitrag aufgrund der Einschränkung der Reputationsbewertung nicht kommentieren.
quelle
Hier ist eine Lösung für React (nicht React Native) mit TypeScript.
Das gleiche Konzept kann auf React Native angewendet werden
Verwendungszweck:
Anzeigen:
quelle
Verwendung
\n
in Text und CSSwhite-space: pre-wrap;
quelle
whiteSpace
als React Native Text Style Prop aufgeführt . Beachten Sie, dass dies kein HTML ist.