Как я могу вставить разрыв строки в компонент ‹Text› в React Native?

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

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

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

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

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

Использовать:

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

Результат:

Hi,

Кертис!

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

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

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

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

(реагировать-родной 0.41.0)

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

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

}

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

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

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

Есть два варианта:

Вариант 1. Использование шаблонных литералов.

const Message = 'This is a message';

<Text>
{`
  Hi~
  ${Message}
`}
</Text>

Результат:

Hi~
This is a message

Вариант 2: Используйте {'\ n'} в качестве разрыва строки.

<Text>

   Hello {'\n'}

   World!

</Text>

Результат:

Hello
World!

Вы можете попробовать вот так

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

Простые обратные кавычки (функция ES 6)

РЕШЕНИЕ 1

const Message = 'This is a message';

<Text>
{`
  Hi~
  ${Message}
`}
</Text>

РЕШЕНИЕ 2 Добавьте \ n в текст

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

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

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

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

{'Create \ nYour Account'}

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

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

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

<Text>

   Hello {'\n'}

   World!

</Text>

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

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

Hi~
This is a test message

https://stackoverflow.com/a/44845810/10480776 Ответ @Edison D'souza был именно тем, что я искал . Однако он заменял только первое вхождение строки. Вот мое решение для обработки нескольких тегов <br/>:

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

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

Вот решение для 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>

Отображает:

сделай это:

<Text>

 { "Hi~ \n this is a test message." }

<Text/>

это хороший вопрос, вы можете сделать это несколькими способами: Первый

<View>
    <Text>
        Hi this is first line  {\n}  hi this is second line 
    </Text>
</View>

что означает, что вы можете использовать {\ n} обратную косую черту n для разрыва строки

Второй

<View>
     <Text>
         Hi this is first line
     </Text>
     <View>
         <Text>
             hi this is second line 
         </Text>
     </View>
</View>

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