Как вставить перенос строки в компонент в React Native?

Я хочу вставить новую строку (например, \r\n,
) в компонент Text в React Native.

Если у меня есть:

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

Тогда React Native выдает Привет~ это тестовое сообщение.

Можно ли сделать так, чтобы текст добавлял новую строку?

Hi~
this is a test message.
systemovich
Редактировал вопрос 27-го февраля 2019 в 8:39
Программирование
text javascript react-native newline
9-го сентября 2015 в 1:29
206 просмотров
Решение

Это должно помочь:


Hi~{"\n"}
this is a test message.
Matt McDonald
Редактировал ответ 24-го сентября 2019 в 3:38
Комментарии (8)

Вы также можете:

{`
Hi~
this is a test message.
`}

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

Комментарии (6)

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

{`Hi,\nCurtis!`}

Результат:

Привет,

Кертис!

ata
Редактировал ответ 17-го мая 2018 в 10:25
Комментарии (2)

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

{`Hi~\nthis is a test message.`}

(react-native 0.41.0)

Комментарии (0)

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

{this.state.user.bio.replace('<br/>', '\n')}
Комментарии (0)

Вы можете использовать {&#39;\П&#39;} как разрывы строк. в <текст> Привет~ {'\П'} это тестовое сообщение. </текст>

Saqib Omer
Редактировал ответ 17-го ноября 2017 в 7:58
Комментарии (0)

Еще лучше: если вы используете `стиле-компонентов , вы можете сделать что-то вроде этого:

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 (

      {`
        1. line 1
        2. line 2
        3. line 3
      `}

  );
 }

}
Комментарии (0)

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

{`${val}\n`}
Комментарии (0)

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

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

Возвышенное подсветка синтаксиса помогает выделить линию-брейк характер:

Комментарии (0)

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

  render() {
    const br = `\n`;
     return (
        Capital Street{br}Cambridge{br}CB11 5XE{br}United Kingdom
     )  
  }
Комментарии (0)

Вы можете использовать ` такой:

{`Hi~
this is a test message.`}
Комментарии (0)

Вы можете сделать это следующим образом:

в <текст>{'создать\nYour счета'}</текст>

Комментарии (1)

Просто положить {&#39;\П&#39;} в тексте тег



   Hello {'\n'}

   World!
Chris McGrath
Редактировал ответ 16-го ноября 2019 в 11:36
Комментарии (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 = (
      {description}
    );

    return (

        {descriptionElement}

    );
  }
}

Посмотреть закуски на живом примере: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example

Комментарии (0)

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

//реагировать JS

<div style={{ whiteSpace: 'pre-wrap' }}>
 {`hello \nthere`}
</div>

//родной (Не'т проверял, но технически должно работать..)



 {`hello \nthere`}
sarathantony
Редактировал ответ 6-го сентября 2019 в 5:24
Комментарии (0)

Просто используйте {" и\Н", У}, где вы хотите, чтобы сломать линию

Комментарии (0)

Использовать \N в тексте и CSS бело-пространстве: предварительно обертывание;

Комментарии (1)