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