Come posso inserire un'interruzione di riga in un componente <Testo> in React Native?


336

Voglio inserire una nuova riga (come \ r \ n, <br />) in un componente Text in React Native.

Se ho:

<text><br />
Hi~<br >
this is a test message.<br />
</text>

Quindi il rendering di React Native Hi~ this is a test message.

È possibile eseguire il rendering del testo per aggiungere una nuova riga in questo modo:

Hi~
this is a test message.

È possibile utilizzare \ndove si desidera interrompere la linea.
Sam009

Risposte:


655

Questo dovrebbe farlo:

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

21
C'è un modo per farlo con stringa da variabile in modo da poter usare <Text>{content}</Text>:?
Sklenar romano,

2
\ n è un'interruzione di riga
Chris Ghenea,

8
Grazie per questo. Ho finito per creare un componente di interruzione di linea per un rapido accesso var Br = React.createClass({ render() { return ( <Text> {"\n"}{"\n"} </Text> ) } })
Jonathan Lockley,

4
Cosa succede se il testo è in una variabile stringa? <Text>{comments}</Text>Non possiamo usare la {\n}logica lì. Allora come?
user2078023

2
Se il testo proviene da un sostegno, assicurati di passarlo in questo modo: <Component text={"Line1\nLine2"} />invece di <Component text="Line1\nLine2" />(nota le parentesi graffe aggiunte)
qwertzguy,

92

Puoi anche fare:

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

Più facile a mio avviso, perché non è necessario inserire elementi all'interno della stringa; basta avvolgerlo una volta e mantiene tutte le interruzioni di riga.


7
questa è la soluzione più pulita finora, insieme awhite-space: pre-line;
Tomasz Mularczyk,

3
@Tomasz: Penso che non ci sia spazio bianco o spazio bianco: -Stylesheet per <Testo> -Tag in reagente nativo - o sbaglio?
Suther,

1
I letterali modello sono puliti e ordinati rispetto alla risposta accettata
Hemadri Dasari,

Immagino che lo stile degli spazi bianchi dovrebbe rimuovere gli spazi intenzionali, giusto? Se sì, ne ho disperatamente bisogno, altrimenti i letterali a stringhe diventano super brutti ...
Xerus

@Xerus Puoi semplicemente utilizzare un post-elaboratore di testi per rimuovere il rientro, come mostrato qui: gist.github.com/Venryx/84cce3413b1f7ae75b3140dd128f944c
Venryx

34

Uso:

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

Risultato:

Ciao,

Curtis!


2
Questo sembra non funzionare quando il messaggio è una variabile stringa: <Testo> {messaggio} </Text>
user2078023

Puoi usare la funzione in questo modo: splitLine = message => {...} e RegExp, quindi <Text> {this.splitLine (message)} </Text>
COdek,

13

Questo ha funzionato per me

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

(reattivo 0.41.0)


12

Se stai visualizzando dati da variabili di stato, usa questo.

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

9

È possibile utilizzare {'\n'}come interruzioni di riga. Ciao ~ {'\ n'} questo è un messaggio di prova.


4

Meglio ancora: se usi styled-components, puoi fare qualcosa del genere:

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

}

1
Questo non ha nulla a che fare con i componenti con stile e funzionerà indipendentemente dal fatto che li usi o meno.
Kuba Jagoda,


2

Avevo bisogno di una diramazione di una riga in un operatore ternario per mantenere il mio codice ben rientrato.

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

L'evidenziazione della sintassi sublime aiuta a evidenziare il carattere di interruzione di riga:

Evidenziazione della sintassi sublime


1

Puoi usare `` in questo modo:

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

1

Puoi farlo come segue:

{"Crea \ nIl tuo account"}


Ha funzionato anche qui <Header headerText = {'Muhammad \ n Tayyab \ n Rana'} subHeadline = "Web Developer and Designer" />
muhammad tayyab

1

Puoi anche semplicemente aggiungerlo come costante nel tuo metodo di rendering in modo che sia facile da riutilizzare:

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

1

Basta inserire {'\n'}il tag Text

<Text>

   Hello {'\n'}

   World!

</Text>

1

Uno dei modi più puliti e flessibili sarebbe usare i Template Literals .

Un vantaggio nell'utilizzare questo è, se si desidera visualizzare il contenuto della variabile stringa nel corpo del testo, è più pulito e diretto.

(Nota l'uso di caratteri di backtick)

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

Ne deriverebbe

Hi~
This is a test message

0

Nel caso in cui qualcuno stia cercando una soluzione in cui desideri avere una nuova riga per ogni stringa in un array, potresti fare qualcosa del genere:

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

Vedi snack per un esempio dal vivo: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example



0

Un altro modo per inserire <br>tra le righe di testo definite in un array:

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;
  }, []);

Quindi il testo può essere usato come variabile:

<Text>{textContent}</Text>

Se non disponibile, Fragmentpuò essere definito in questo modo:

const Fragment = (props) => props.children;

0

https://stackoverflow.com/a/44845810/10480776 La risposta di @Edison D'souza era esattamente quello che stavo cercando. Tuttavia, stava solo sostituendo la prima occorrenza della stringa. Ecco la mia soluzione per la gestione di più <br/>tag:

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

Spiacenti, non ho potuto commentare il suo post a causa della limitazione del punteggio di reputazione.


0

Ecco una soluzione per React (non React Native) usando TypeScript.

Lo stesso concetto può essere applicato a React Native

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;

Uso:

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

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

Displays: inserisci qui la descrizione dell'immagine


Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.