我想在React Native的文本组件中插入一个新行(如\r\n， <br />)。
如果我有:
<text>
<br />
Hi~<br />
this is a test message.<br />
</text>
然后React Native渲染Hi~这是一个测试消息。
它是可能的渲染文本添加一个新的行像这样:
Hi~
this is a test message.
当前回答
只需在Text标签中放入{'\n'}
<Text>
Hello {'\n'}
World!
</Text>
其他回答
简单使用反勾号(es6特性)
解决方案1
const Message = 'This is a message';
<Text>
{`
Hi~
${Message}
`}
</Text>
解决方案2在文本中添加“\n”
<Text>
Hi~{"\n"}
This is a message.
</Text>
解决方案1:
<Text>
line 1{"\n"}
line 2
</Text>
解决方案2:
<Text>{`
line 1
line 2
`}</Text>
解决方案3:
以下是我处理多个<br/>标签的解决方案:
<Text style={{ whiteSpace: "pre-line" }}>
{"Hi<br/> this is a test message.".split("<br/>").join("\n")}
</Text>
解决方案4:
使用maxWidth自动换行
<Text style={{ maxWidth:200}}>this is a test message. this is a test message</Text>
我知道这是相当古老的，但我提出了一个自动断行的解决方案，允许您以通常的方式传递文本(没有诡计)
我创建了以下组件
import React, {} from "react";
import {Text} from "react-native";
function MultiLineText({children, ...otherProps}) {
const splits = children.split("\\n")
console.log(splits);
const items = []
for (let s of splits){
items.push(s)
items.push("\n")
}
return (
<Text {...otherProps}>{items}</Text>
);
}
export default MultiLineText;
然后你就可以这样使用它了。
<MultiLineText style={styles.text}>This is the first line\nThis is teh second line</MultiLineText>
你还可以:
<Text>{`
Hi~
this is a test message.
`}</Text>
在我看来更简单，因为你不需要在字符串中插入东西;只要换行一次，就能保留所有换行符。
只需在Text标签中放入{'\n'}
<Text>
Hello {'\n'}
World!
</Text>
