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

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.

Dies sollte es tun:

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

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.

Verwenden:

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

Ergebnis:

Hallo,

Curtis!

Das hat bei mir funktioniert

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

(reaktionsnativ 0,41,0)

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

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

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

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>
  );
 }

}

Sie können versuchen, so zu verwenden

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

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:

Sie können `` wie folgt verwenden:

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

Sie können dies wie folgt tun:

{'Create \ nIhr Konto'}

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>
     )  
  }

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

<Text>

   Hello {'\n'}

   World!

</Text>

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

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

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

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;

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.

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:

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