React Native의 <Text> 구성 요소에 줄 바꿈을 어떻게 삽입합니까?

React Native의 텍스트 구성 요소에 새 줄 (예 : \ r \ n, <br />)을 삽입하고 싶습니다.

만약 내가 가지고 있다면:

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

그런 다음 네이티브 렌더링 반응 Hi~ this is a test message.

다음과 같이 텍스트를 렌더링하여 새 줄을 추가 할 수 있습니까?

Hi~
this is a test message.

이것은해야합니다 :

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

당신은 또한 할 수 있습니다 :

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

문자열에 내용을 삽입 할 필요가 없기 때문에 제 생각에는 더 쉽습니다. 한 번만 감싸면 모든 줄 바꿈이 유지됩니다.

사용하다:

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

결과:

안녕,

커티스!

이것은 나를 위해 일했다

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

(반응 네이티브 0.41.0)

상태 변수의 데이터를 표시하는 경우이를 사용하십시오.

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

{'\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>
  );
 }

}

이런 식으로 사용해보십시오

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

코드를 멋지게 들여 쓰기 위해 삼항 연산자에서 한 줄 솔루션 분기가 필요했습니다.

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

숭고한 구문 강조 표시는 줄 바꿈 문자를 강조 표시하는 데 도움이됩니다.

다음과 같이``을 사용할 수 있습니다.

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

다음과 같이 할 수 있습니다.

{ '계정 만들기 \ n 계정'}

렌더 메소드에서 상수로 추가하여 재사용하기 쉽습니다.

  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

누구든지 배열의 각 문자열에 대해 줄을 바꾸려는 솔루션을 찾고 있다면 다음과 같이 할 수 있습니다.

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

줄을 바꾸려는 곳에 { "\ n"}를 사용하십시오.

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

https : //.com/a/44845810/10480776 @Edison D' souza의 대답은 내가 찾던 것과 정확히 일치했습니다. 그러나 문자열의 첫 번째 항목 만 바꿨습니다. 여러 <br/>태그 를 처리하는 솔루션은 다음과 같습니다 .

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

평판 점수 제한으로 인해 게시물에 댓글을 달 수 없습니다.

다음은 TypeScript를 사용하는 React (React Native 아님)에 대한 솔루션입니다.

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>

디스플레이 :

\n텍스트와 CSS에서 사용white-space: pre-wrap;