Wie kann ich in React Native einen Zeilenumbruch in eine <Text> -Komponente einfügen?

335

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.
Curtis
quelle
Sie können verwenden, \nwo Sie die Linie brechen möchten.
Sam009

Antworten:

652

Dies sollte es tun:

<Text>
Hi~{"\n"}
this is a test message.
</Text>
Chris Ghenea
quelle
20
Gibt es eine Möglichkeit, dies mit einem String aus einer Variablen zu tun, damit ich Folgendes verwenden kann : <Text>{content}</Text>?
Roman Sklenar
2
\ n ist ein Zeilenumbruch
Chris Ghenea
8
Danke dafür. var Br = React.createClass({ render() { return ( <Text> {"\n"}{"\n"} </Text> ) } })
Jonathan Lockley
4
Was ist, wenn sich der Text in einer Zeichenfolgenvariablen befindet? <Text>{comments}</Text>Wir können die {\n}Logik dort nicht verwenden . Wie dann?
user2078023
2
Wenn der Text von einer Requisite stammt, stellen Sie sicher, dass Sie ihn wie <Component text={"Line1\nLine2"} /><Component text="Line1\nLine2" />
folgt übergeben
91

Sie können auch:

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

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.

Venryx
quelle
7
Dies ist die bisher sauberste Lösung, zusammen mitwhite-space: pre-line;
Tomasz Mularczyk
3
@Tomasz: Ich denke, es gibt kein Leerzeichen oder Leerzeichen: -Stylesheet für <Text> -Tag in React-Native - oder irre ich mich?
Suther
1
Vorlagenliterale sind sauber und ordentlich im Vergleich zur akzeptierten Antwort
Hemadri Dasari
Ich denke, der Leerraumstil soll Absichtsräume entfernen, oder? Wenn ja, brauche ich es dringend, sonst werden String-Literale super hässlich ...
Xerus
@ Xerus Sie können einfach einen Text-Postprozessor verwenden, um die Einrückung zu entfernen, wie hier zu sehen: gist.github.com/Venryx/84cce3413b1f7ae75b3140dd128f944c
Venryx
34

Verwenden:

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

Ergebnis:

Hallo,

Curtis!

COdek
quelle
2
Dies scheint nicht zu funktionieren, wenn die Nachricht eine Zeichenfolgenvariable ist: <Text> {message} </ Text>
user2078023
Sie können die folgende Funktion verwenden: splitLine = message => {...} und RegExp, dann <Text> {this.splitLine (message)} </ Text>
COdek
13

Das hat bei mir funktioniert

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

(reaktionsnativ 0,41,0)

Olivier
quelle
12

Wenn Sie überhaupt Daten aus Statusvariablen anzeigen, verwenden Sie diese.

<Text>{this.state.user.bio.replace('<br/>', '\n')}</Text>
Edison D'souza
quelle
9

Sie können {'\n'}als Zeilenumbrüche verwenden. Hi ~ {'\ n'} Dies ist eine Testnachricht.

Vijay Suryawanshi
quelle
4

Besser noch: Wenn Sie verwenden styled-components, können Sie so etwas tun:

import React, { Component } from 'react';
import styled from 'styled-components';

const Text = styled.Text`
  text-align: left;
  font-size: 20px;
`;

export default class extends Component {

 (...)

 render(){
  return (
    <View>
      <Text>{`
        1. line 1
        2. line 2
        3. line 3
      `}</Text>
    </View>
  );
 }

}
Telmo Dias
quelle
Dies hat nichts mit gestalteten Komponenten zu tun und funktioniert unabhängig davon, ob Sie sie verwenden oder nicht.
Kuba Jagoda
3

Sie können versuchen, so zu verwenden

<text>{`${val}\n`}</text>
Pankaj Agarwal
quelle
2

Ich brauchte eine einzeilige Lösung, die in einen ternären Operator verzweigt, um meinen Code gut eingerückt zu halten.

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

Durch die Hervorhebung der erhabenen Syntax wird das Zeilenumbruchzeichen hervorgehoben:

Hervorragendes Syntax-Highlight

Beau Smith
quelle
1

Sie können `` wie folgt verwenden:

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

Sie können dies wie folgt tun:

{'Create \ nIhr Konto'}

Himanshu Ahuja
quelle
Auch hier hat es funktioniert. <Header headerText = {'Muhammad \ n Tayyab \ n Rana'} subHeadline = "Webentwickler und Designer" />
muhammad tayyab
1

Sie können es auch einfach als Konstante in Ihre Rendermethode einfügen, damit es einfach wiederverwendet werden kann:

  render() {
    const br = `\n`;
     return (
        <Text>Capital Street{br}Cambridge{br}CB11 5XE{br}United Kingdom</Text>
     )  
  }
Tim J.
quelle
1

Einfach {'\n'}in das Text-Tag einfügen

<Text>

   Hello {'\n'}

   World!

</Text>
Hashini
quelle
1

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)

const customMessage = 'This is a test message';
<Text>
{`
  Hi~
  ${customMessage}
`}
</Text>

Würde dazu führen

Hi~
This is a test message
Akhil Balakrishnan
quelle
0

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:

import * as React from 'react';
import { Text, View} from 'react-native';


export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      description: ['Line 1', 'Line 2', 'Line 3'],
    };
  }

  render() {
    // Separate each string with a new line
    let description = this.state.description.join('\n\n');

    let descriptionElement = (
      <Text>{description}</Text>
    );

    return (
      <View style={{marginTop: 50}}>
        {descriptionElement}
      </View>
    );
  }
}

Ein Live-Beispiel finden Sie unter Snack: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example

ReturnOfTheMac
quelle
0

Verwenden Sie einfach {"\ n"}, wo Sie die Linie brechen möchten

M. Hassam Yahya
quelle
0

Eine andere Möglichkeit, <br>zwischen Textzeilen einzufügen , die in einem Array definiert sind:

import react, { Fragment } from 'react';

const lines = [
  'One line',
  'Another line',
];

const textContent =
  lines.reduce(items, line, index) => {
    if (index > 0) {
      items.push(<br key={'br-'+index}/>);
    }
    items.push(<Fragment key={'item-'+index}>{line}</Fragment>);
    return items;
  }, []);

Dann kann der Text als Variable verwendet werden:

<Text>{textContent}</Text>

Wenn nicht verfügbar, Fragmentkann folgendermaßen definiert werden:

const Fragment = (props) => props.children;
Max Oriola
quelle
0

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:

<Typography style={{ whiteSpace: "pre-line" }}>
    {shortDescription.split("<br/>").join("\n")}
</Typography>

Entschuldigung, ich konnte seinen Beitrag aufgrund der Einschränkung der Reputationsbewertung nicht kommentieren.

ilike2breakthngs
quelle
0

Hier ist eine Lösung für React (nicht React Native) mit TypeScript.

Das gleiche Konzept kann auf React Native angewendet werden

import React from 'react';

type Props = {
  children: string;
  Wrapper?: any;
}

/**
 * Automatically break lines for text
 *
 * Avoids relying on <br /> for every line break
 *
 * @example
 * <Text>
 *   {`
 *     First line
 *
 *     Another line, which will respect line break
 *  `}
 * </Text>
 * @param props
 */
export const Text: React.FunctionComponent<Props> = (props) => {
  const { children, Wrapper = 'div' } = props;

  return (
    <Wrapper style={{ whiteSpace: 'pre-line' }}>
      {children}
    </Wrapper>
  );
};

export default Text;

Verwendungszweck:

<Text>
  {`
    This page uses server side rendering (SSR)

    Each page refresh (either SSR or CSR) queries the GraphQL API and displays products below:
  `}
</Text>

Anzeigen: Geben Sie hier die Bildbeschreibung ein

Vadorequest
quelle
-3

Verwendung \nin Text und CSSwhite-space: pre-wrap;

Alexey Zavrin
quelle
1
Ich sehe nicht whiteSpaceals React Native Text Style Prop aufgeführt . Beachten Sie, dass dies kein HTML ist.
Binki
als Referenz funktioniert dies in reagieren js. Andere arbeiten aus irgendeinem Grund nicht für mich.
HimanshuArora9419