Como inserir uma quebra de linha em um componente <Text> no React Native?


336

Quero inserir uma nova linha (como \ r \ n, <br />) em um componente de texto no React Native.

Se eu tiver:

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

Em seguida, Reagir renderizações nativas Hi~ this is a test message.

É possível renderizar texto para adicionar uma nova linha assim:

Hi~
this is a test message.

Você pode usar \nonde deseja quebrar a linha.
Sam009

Respostas:


652

Isso deve servir:

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

20
Existe uma maneira de fazê-lo com string da variável para que eu possa usar <Text>{content}</Text>:?
Roman Sklenar 29/03

2
\ n é uma quebra de linha
Chris Ghenea 30/03

8
Obrigado por isso. Acabei fazendo um componente de quebra de linha para acesso rápido var Br = React.createClass({ render() { return ( <Text> {"\n"}{"\n"} </Text> ) } })
Jonathan Lockley

4
E se o texto estiver em uma variável de sequência? <Text>{comments}</Text>Não podemos usar a {\n}lógica lá. Então como?
precisa saber é o seguinte

2
Se o texto vier de um suporte, certifique-se de passá-lo desta maneira: em <Component text={"Line1\nLine2"} />vez de <Component text="Line1\nLine2" />(observe as chaves adicionadas)
qwertzguy

91

Você também pode fazer:

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

Mais fácil na minha opinião, porque você não precisa inserir coisas na string; basta envolvê-lo uma vez e ele mantém todas as quebras de linha.


7
esta é a solução mais limpa até agora, juntamente comwhite-space: pre-line;
Tomasz Mularczyk

3
@ Tomasz: Eu acho que não há espaço em branco ou whiteSpace: -Stylesheet para <Text> -Tag em react-native - ou estou errado?
Suther

11
Literais modelo são limpo e arrumado comparar a resposta aceita
Hemadri Dasari

Eu acho que o estilo de espaço em branco deve remover os espaços de intenção, certo? Se sim, eu preciso desesperadamente que, caso contrário, strings literais obter super feio ...
Xerus

@Xerus Você pode usar apenas um pós-processador de texto para remover o recuo, como pode ser visto aqui: gist.github.com/Venryx/84cce3413b1f7ae75b3140dd128f944c
Venryx

34

Usar:

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

Resultado:

Oi,

Curtis!


2
Parece que não está funcionando quando a mensagem é uma variável de cadeia: <Text> {message} </Text>
user2078023

Você pode usar uma função como esta: splitLine = message => {...} e RegExp, e <Text> {this.splitLine (message)} </Text>
COdek

13

Isso funcionou para mim

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

(reagir nativo 0.41.0)


12

Se você estiver exibindo dados de variáveis ​​de estado, use-o.

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

9

Você pode usar {'\n'}como quebras de linha. Olá ~ {'\ n'} esta é uma mensagem de teste.


4

Melhor ainda: se você usar styled-components, poderá fazer algo assim:

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

}

Isso não tem nada a ver com componentes estilizados e funcionará independentemente de você usá-los ou não.
Kuba Jagoda


2

Eu precisava de uma solução de uma linha ramificada em um operador ternário para manter meu código bem recuado.

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

O destaque sublinhado da sintaxe ajuda a destacar o caractere de quebra de linha:

Destaque sublinhado da sintaxe


1

Você pode usar `` assim:

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

1

Você pode fazer o seguinte:

{'Crie \ nSua Conta'}


Funcionou forma bem aqui <Header headerText = { 'Muhammad \ n Tayyab \ n Rana'} subheadline = "Web Developer e Designer" />
Muhammad Tayyab

1

Você também pode adicioná-lo como uma constante no seu método de renderização para facilitar a reutilização:

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

1

Basta colocar {'\n'}dentro da tag Text

<Text>

   Hello {'\n'}

   World!

</Text>

1

Uma das maneiras mais limpas e flexíveis seria usar Literais de Modelo .

Uma vantagem de usar isso é que, se você deseja exibir o conteúdo da variável string no corpo do texto, é mais limpo e direto.

(Observe o uso de caracteres backtick)

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

Resultaria em

Hi~
This is a test message

0

Caso alguém esteja procurando uma solução em que você queira ter uma nova linha para cada string em uma matriz, você pode fazer algo assim:

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

Veja o lanche para um exemplo ao vivo: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example



0

Outra maneira de inserir <br>entre as linhas de texto definidas em uma matriz:

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

Então o texto pode ser usado como variável:

<Text>{textContent}</Text>

Se não estiver disponível, Fragmentpode ser definido desta maneira:

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

0

https://stackoverflow.com/a/44845810/10480776 A resposta de @Edison D'souza era exatamente o que eu estava procurando. No entanto, estava substituindo apenas a primeira ocorrência da sequência. Aqui estava minha solução para lidar com várias <br/>tags:

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

Desculpe, não pude comentar sua postagem devido à limitação de pontuação na reputação.


0

Aqui está uma solução para o React (não o React Native) usando o TypeScript.

O mesmo conceito pode ser aplicado ao 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>

Exibe: insira a descrição da imagem aqui


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.