Как вставить разрыв строки в компонент <Text> в React Native?

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Результат:

Привет,

Кертис!

Ответ 4

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

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

(реакция-родная 0.41.0)

Ответ 5

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

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

Ответ 6

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

Ответ 7

Еще лучше: если вы используете 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>
  );
 }

}

Ответ 8

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

<text>{'${val}\n'}</text>

Ответ 9

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

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

Подсветка подсветки синтаксиса помогает выделить символ прерывания строки:

Ответ 10

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

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

Ответ 11

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

{'Создать\nВаш аккаунт'}

Ответ 12

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

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

Ответ 13

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

//реагируем js

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

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

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

Ответ 14

Вы можете добавить .replace в конец строки. например.

<Text style={styles.cellTitle} numberOfLines={2}>
  {item.name.replace('\n', ' ')}
</Text>

Это заменит \n на одно место.

Ответ 15

В случае, если кто-то ищет решение, в котором вы хотите иметь новую строку для каждой строки в массиве, вы можете сделать что-то вроде этого:

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

Ответ 16

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

Ответ 17

Добавление закрывающего тега к разрыву строки jsx, казалось, сработало для меня.

<text>First Line<br></br>Second Line</text>

Выход:

First Line Second Line

Ответ 18

Используйте \n в тексте и css white-space: pre-wrap;