Jak wstawić podział linii do komponentu <Text> w React Native?

336

Chcę wstawić nową linię (np. \ R \ n, <br />) do komponentu Text w React Native.

Jeżeli mam:

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

Następnie renderuje React Native Hi~ this is a test message.

Czy jest możliwe renderowanie tekstu w celu dodania nowego wiersza:

Hi~
this is a test message.
Curtis
źródło
Możesz użyć \nmiejsca, w którym chcesz przerwać linię.
Sam009

Odpowiedzi:

654

To powinno to zrobić:

<Text>
Hi~{"\n"}
this is a test message.
</Text>
Chris Ghenea
źródło
20
Czy istnieje sposób, aby to zrobić za pomocą ciągu znaków ze zmiennej, aby móc użyć <Text>{content}</Text>:?
Roman Sklenar
2
\ n jest przełamaniem linii
Chris Ghenea
8
Dzięki za to. Skończyło się na komponencie podziału linii dla szybkiego dostępu var Br = React.createClass({ render() { return ( <Text> {"\n"}{"\n"} </Text> ) } })
Jonathan Lockley,
4
Co jeśli tekst jest w zmiennej typu string? <Text>{comments}</Text>Nie możemy tam użyć {\n}logiki. Więc jak?
user2078023
2
Jeśli tekst pochodzi z rekwizytu, upewnij się, że przekazujesz go w ten sposób: <Component text={"Line1\nLine2"} />zamiast <Component text="Line1\nLine2" />(zauważ dodatkowe nawiasy klamrowe)
qwertzguy
91

Możesz także:

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

Moim zdaniem jest to łatwiejsze, ponieważ nie trzeba wstawiać elementów w łańcuch; po prostu owiń go raz i zachowa wszystkie twoje przełamania linii.

Venryx
źródło
7
to jak dotąd najczystsze rozwiązanie, razem zwhite-space: pre-line;
Tomaszem Mularczykiem
3
@Tomasz: Wydaje mi się, że nie ma białych znaków ani białych znaków: -Stylesheet dla <Text> -Tag w reakcyjnym rodzimym - czy się mylę?
suther
1
Literały szablonów są czyste i schludne w porównaniu do przyjętej odpowiedzi
Hemadri Dasari,
Wydaje mi się, że styl białych znaków ma usuwać spacje, prawda? Jeśli tak, to desperacko tego potrzebuję, w przeciwnym razie dosłowne napisy stają się bardzo brzydkie ...
Xerus
@ Xerus Możesz po prostu użyć postprocesora tekstowego, aby usunąć wcięcie, jak pokazano tutaj: gist.github.com/Venryx/84cce3413b1f7ae75b3140dd128f944c
Venryx
34

Posługiwać się:

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

Wynik:

Cześć,

Curtis!

COdek
źródło
2
Wydaje się, że to nie działa, gdy wiadomość jest zmienną łańcuchową: <Text> {message} </Text>
user2078023
Możesz użyć takiej funkcji: splitLine = message => {...} i RegExp w nim, a następnie <Text> {this.splitLine (wiadomość)} </Text>
COdek
13

To zadziałało dla mnie

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

(native-reakcyjny 0.41.0)

Olivier
źródło
12

Jeśli w ogóle wyświetlasz dane ze zmiennych stanu, użyj tego.

<Text>{this.state.user.bio.replace('<br/>', '\n')}</Text>
Edison D'souza
źródło
9

Możesz użyć {'\n'}jako podziałów linii. Cześć ~ {'\ n'} to jest wiadomość testowa.

Vijay Suryawanshi
źródło
4

Jeszcze lepiej: jeśli używasz styled-components, możesz zrobić coś takiego:

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
źródło
1
Nie ma to nic wspólnego ze stylizowanymi komponentami i będzie działać bez względu na to, czy ich użyjesz, czy nie.
Kuba Jagoda
3

Możesz spróbować użyć tego w ten sposób

<text>{`${val}\n`}</text>
Pankaj Agarwal
źródło
2

Potrzebowałem jedno-liniowego rozwiązania rozgałęziającego się w trójskładnikowym operatorze, aby mój kod był ładnie wcięty.

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

Wzniosłe podświetlanie składni pomaga podkreślić znak podziału linii:

Podniosła podświetlana składnia

Beau Smith
źródło
1

Możesz użyć `` w ten sposób:

<Text>{`Hi~
this is a test message.`}</Text>
Idan
źródło
1

Możesz to zrobić w następujący sposób:

{„Utwórz \ nTwoje konto”}

Himanshu Ahuja
źródło
Działa to również tutaj <Header headerText = {'Muhammad \ n Tayyab \ n Rana'} subHeadline = "Web Developer and Designer" />
muhammad tayyab
1

Możesz także dodać go jako stałą w metodzie renderowania, aby łatwo było go ponownie użyć:

  render() {
    const br = `\n`;
     return (
        <Text>Capital Street{br}Cambridge{br}CB11 5XE{br}United Kingdom</Text>
     )  
  }
Tim J
źródło
1

Wystarczy umieścić {'\n'}w tagu Text

<Text>

   Hello {'\n'}

   World!

</Text>
Hashini
źródło
1

Jednym z najczystszych i najbardziej elastycznych sposobów byłoby użycie literałów szablonów .

Zaletą korzystania z tego jest to, że jeśli chcesz wyświetlić zawartość zmiennej typu string w treści tekstu, jest ona czystsza i prosta.

(Zwróć uwagę na użycie znaków backtick)

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

Spowodowałoby to

Hi~
This is a test message
Akhil Balakrishnan
źródło
0

Jeśli ktoś szuka rozwiązania, w którym chcesz mieć nową linię dla każdego łańcucha w tablicy, możesz zrobić coś takiego:

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

Zobacz przekąskę na żywo: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example

ReturnOfTheMac
źródło
0

Po prostu użyj {"\ n"} w miejscu, w którym chcesz przerwać linię

M.Hassam Yahya
źródło
0

Inny sposób wstawiania <br>między wierszami tekstu zdefiniowanymi w tablicy:

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

Następnie tekst może być użyty jako zmienna:

<Text>{textContent}</Text>

Jeśli nie jest dostępny, Fragmentmożna zdefiniować w ten sposób:

const Fragment = (props) => props.children;
Max Oriola
źródło
0

https://stackoverflow.com/a/44845810/10480776 @Edison D'souza odpowiedź była dokładnie tym, czego szukałem. Jednak zastępowało to tylko pierwsze wystąpienie ciągu. Oto moje rozwiązanie do obsługi wielu <br/>tagów:

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

Niestety, nie mogłem skomentować jego postu z powodu ograniczenia wyniku reputacji.

ilike2breakthngs
źródło
0

Oto rozwiązanie dla React (nie React Native) przy użyciu TypeScript.

Tę samą koncepcję można zastosować do 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;

Stosowanie:

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

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

Wyświetla: wprowadź opis zdjęcia tutaj

Vadorequest
źródło
-3

Użyj \nw tekście i csswhite-space: pre-wrap;

Alexey Zavrin
źródło
1
Nie widzę na whiteSpaceliście rekwizytów React Native Text Style . Pamiętaj, że to nie jest HTML.
binki
dla odniesienia działa to w reakcji js. Inni z jakiegoś powodu nie działają dla mnie.
HimanshuArora9419