wake-up-neo.com

Wie kann ich einen Zeilenumbruch in eine <Text> -Komponente in React Native 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 macht React Native 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.
javascripttextreact-nativenewline
230
Curtis

Ich kann es momentan nicht testen, aber das sollte es tun:

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

Sie können auch tun:

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

Meiner Meinung nach einfacher, weil Sie nichts in die Zeichenfolge einfügen müssen. wickeln Sie es einfach einmal ein und es behält alle Ihre Zeilenumbrüche.

71
Venryx

Verwenden:

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

Ergebnis:

Hallo,

Curtis!

24
COdek

Das hat bei mir funktioniert

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

(reaktionsnativ 0.41.0)

13
Olivier

Sie können {'\n'} als Zeilenumbruch verwenden. Hallo ~ {'\ n'}, dies ist eine Testnachricht.

9
Vijay Suryawanshi

Wenn Sie überhaupt Daten von Statusvariablen anzeigen, verwenden Sie diese Option.

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

Noch besser: Wenn Sie styled-components verwenden, können Sie Folgendes 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>
  );
 }

}
3
Telmo Dias

Sie können versuchen, so zu verwenden

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

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

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

Hervorragende Syntaxhervorhebung unterstützt die Hervorhebung des Zeilenumbruchs:

Sublime syntax highlight

2
Beau Smith

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>
     )  
  }
1
Tim J

Sie können es wie folgt tun:

{'Erstelle deinen Account'}

1
Himanshu Ahuja

Sie können `` wie folgt verwenden:

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

Falls jemand nach einer Lösung sucht, bei der Sie für jede Zeichenfolge in einem Array eine neue Zeile erstellen 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>
    );
  }
}

Siehe snack für ein Live-Beispiel: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example

0
ReturnOfTheMac