Як я можу вставити розрив рядка в компонент <Text> в React Native?


336

Я хочу вставити новий рядок (наприклад, \ r \ n, <br />) в компонент Text в React Native.

Якщо я маю:

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

Потім React Native рендерує Hi~ this is a test message.

Чи можливо в тексті візуалізації додати новий рядок так:

Hi~
this is a test message.

Ви можете використовувати \nтам, де хочете перервати лінію.
Sam009

Відповіді:


654

Це слід зробити:

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

20
Чи є спосіб зробити це за допомогою рядка зі змінної, щоб я міг використовувати <Text>{content}</Text>:?
Роман Скленар

2
\ n - перерва лінії
Chris Ghenea

8
Дякую за це Я в кінцевому підсумку створив компонент розриву лінії для швидкого доступу var Br = React.createClass({ render() { return ( <Text> {"\n"}{"\n"} </Text> ) } })
Джонатан Локлі

4
Що робити, якщо текст знаходиться в рядковій змінній? <Text>{comments}</Text>Ми не можемо використовувати {\n}логіку там. Тоді як?
користувач2078023

2
Якщо текст походить від опори, переконайтеся, що ви <Component text={"Line1\nLine2"} /><Component text="Line1\nLine2" />
передаєте

91

Ви також можете зробити:

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

На мою думку простіше, тому що не потрібно вставляти речі в рядок; просто оберніть його один раз, і він зберігатиме всі ваші перерви у рядку.


7
це найчистіше рішення поки що, разом зwhite-space: pre-line;
Томаш Муларчик

3
@Tomasz: Я думаю, що немає білого простору або whiteSpace: -Stylesheet for <Text> -Tag in react-native - чи я помиляюся?
суть


Я думаю, що стиль білого простору повинен прибрати пробіли намірів, правда? Якщо так, я відчайдушно потребую цього, інакше рядкові літерали стають супер потворними ...
Xerus

@Xerus Ви можете просто використовувати текстовий пост-процесор, щоб видалити відступи, як видно тут: gist.github.com/Venryx/84cce3413b1f7ae75b3140dd128f944c
Venryx

34

Використання:

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

Результат:

Привіт,

Кертіс!


2
Здається, це не працює, коли повідомлення є
рядковою

Ви можете використовувати таку функцію: splitLine = message => {...} і RegExp в ній, потім <Text> {this.splitLine (повідомлення)} </Text>
COdek

13

Це працювало для мене

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

(реальна реакція 0,41,0)


12

Якщо ви взагалі відображаєте дані зі змінних стану, використовуйте це.

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


4

Ще краще: якщо ви використовуєте styled-components, ви можете зробити щось подібне:

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
Це не має нічого спільного зі стильовими компонентами і працюватиме незалежно від того, використовуєте ви їх чи ні.
Куба Ягода


2

Мені знадобилося однолінійне розгалуження рішення у потрійному операторі, щоб мій код був добре відрізаний.

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

Підсвічування піднесеного синтаксису допомагає виділити символ розриву рядка:

Підсвічування піднесеного синтаксису


1

Ви можете використовувати `` так:

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

1

Ви можете це зробити так:

{'Створіть \ nВаший обліковий запис'}


Тут також працювали форми <Header headerText = {'Muhammad \ n Tayyab \ n Rana'} subHeadline = "Веб-розробник та дизайнер" />
muhammad tayyab

1

Ви також можете просто додати його як константу в методі візуалізації, щоб його легко повторно використовувати:

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


1

Одним з найбільш чистих і гнучких способів було б використання літературних шаблонів .

Перевагою використання цього є те, що якщо ви хочете відобразити зміст рядкової змінної в текстовому тілі, вона є більш чистою і прямою вперед.

(Зверніть увагу на використання символів backtick)

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

Це призведе до

Hi~
This is a test message

0

У випадку, якщо хтось шукає рішення, де потрібно мати новий рядок для кожного рядка в масиві, ви можете зробити щось подібне:

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

Дивіться приклад для перегляду живого прикладу: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example



0

Ще один спосіб вставити <br>між текстовими рядками, визначеними у масиві:

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

Тоді текст можна використовувати як змінний:

<Text>{textContent}</Text>

Якщо немає, Fragmentможна визначити так:

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

0

https://stackoverflow.com/a/44845810/10480776 @Edison Відповідь Дісузи була саме тим, що я шукав. Однак це було лише заміною першого появи рядка. Ось моє рішення для обробки декількох <br/>тегів:

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

На жаль, я не зміг прокоментувати його повідомлення через обмеження репутації.


0

Ось рішення для React (не React Native) за допомогою TypeScript.

Ця ж концепція може бути застосована і до 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;

Використання:

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

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

Відображає: введіть тут опис зображення


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.