Как вставить разрыв строки в компонент <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.
Curtis
источник
Вы можете использовать, \nгде вы хотите, чтобы разорвать линию.
Sam009

Ответы:

655

Это должно сделать это:

<Text>
Hi~{"\n"}
this is a test message.
</Text>
Крис Генея
источник
21
Есть ли способ сделать это с помощью строки из переменной, чтобы я мог использовать <Text>{content}</Text>:?
Роман Скленар
2
\ n это разрыв строки
Крис Генея
8
Спасибо за это. Я закончил тем, что сделал компонент разрыва строки для быстрого доступа var Br = React.createClass({ render() { return ( <Text> {"\n"}{"\n"} </Text> ) } })
Джонатан Локли
4
Что если текст находится в строковой переменной? <Text>{comments}</Text>Мы не можем использовать {\n}логику там. Тогда как?
user2078023
2
Если текст взят из пропеллера, убедитесь, что вы передали его так: <Component text={"Line1\nLine2"} />вместо <Component text="Line1\nLine2" />(обратите внимание на добавленные фигурные скобки)
qwertzguy
92

Вы также можете сделать:

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

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

Venryx
источник
7
это чистое решение до сих пор, вместе сwhite-space: pre-line;
Томаш Mularczyk
3
@ Томаш: Я думаю, что нет пробелов или пробелов: -Стайл для <Text> -Tag в реагировать-родной - или я не прав?
17
1
Шаблонные литералы чистые и аккуратные по сравнению с принятым ответом
Hemadri Dasari
Я предполагаю, что стиль пробела должен удалить пробелы внутри, верно? Если да, я отчаянно нуждается, иначе строковые литералы получить супер некрасиво ...
Xerus
@Xerus Вы можете просто использовать текстовый постпроцессор, чтобы удалить отступы, как показано здесь: gist.github.com/Venryx/84cce3413b1f7ae75b3140dd128f944c
Venryx
34

Использование:

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

Результат:

Здравствуй,

Кертис!

кодеки
источник
2
Кажется, что это не работает, когда сообщение является строковой переменной: <Text> {message} </ Text>
user2078023
Вы можете использовать такую ​​функцию: splitLine = message => {...} и RegExp в ней, затем <Text> {this.splitLine (message)} </ Text>
COdek
13

Это сработало для меня

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

(реакция-нативная 0,41,0)

Оливье
источник
12

Если вы вообще отображаете данные из переменных состояния, используйте это.

<Text>{this.state.user.bio.replace('<br/>', '\n')}</Text>
Эдисон Д'соуза
источник
9

Вы можете использовать {'\n'}как разрывы строк. Привет ~ {'\ n'} это тестовое сообщение.

Виджай Суряванши
источник
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
Это не имеет ничего общего со стилевыми компонентами и будет работать независимо от того, используете вы их или нет.
Куба Ягода
3

Вы можете попробовать использовать вот так

<text>{`${val}\n`}</text>
Панкадж Агарвал
источник
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 = "Веб-разработчик и дизайнер" />
Мухаммад Тайяб
1

Вы также можете просто добавить его как константу в свой метод рендеринга, чтобы его было легко использовать

  render() {
    const br = `\n`;
     return (
        <Text>Capital Street{br}Cambridge{br}CB11 5XE{br}United Kingdom</Text>
     )  
  }
Тим Дж
источник
1

Просто поместите {'\n'}в текстовый тег

<Text>

   Hello {'\n'}

   World!

</Text>
Hashini
источник
1

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

Преимущество использования этого заключается в том, что если вы хотите отобразить содержимое строковой переменной в текстовом теле, оно будет более понятным и понятным.

(Обратите внимание на использование символов обратного хода)

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

ReturnOfTheMac
источник
0

Просто используйте {"\ n"} там, где вы хотите разбить строку

М. Хассам Яхья
источник
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 D'souza ответил именно на то, что я искал. Однако он заменял только первое вхождение строки. Вот мое решение для обработки нескольких <br/>тегов:

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

Извините, я не смог прокомментировать его сообщение из-за ограничения оценки репутации.

ilike2breakthngs
источник
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>

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

Vadorequest
источник
-3

Использовать \nв тексте и CSSwhite-space: pre-wrap;

Алексей Заврин
источник
1
Я не вижу в whiteSpaceсписке React Native Text Style Prop . Обратите внимание, что это не HTML.
Бинки
для справки это работает в реагировать JS. Другие почему-то не работают на меня.
HimanshuArora9419