如何在React Native中的<Text>组件中插入换行符？
Cur*_*tis 262 javascript text newline react-native
我想在React Native的Text组件中插入一个新行(如\ r \n,<br />).
如果我有:
<text><br />
Hi~<br >
this is a test message.<br />
</text>
然后React Native渲染 Hi~ this is a test message.
是否可以渲染文本添加新行,如下所示:
Hi~
this is a test message.
Chr*_*nea 525
我现在无法测试它但是应该这样做:
<Text>
Hi~{"\n"}
this is a test message.
</Text>
- 有没有办法用变量中的字符串来做,所以我可以使用:`<Text> {content} </ Text>`？ (12认同)
- @RomanSklenar var someText ='嗨〜\n这是一条测试信息.'; (7认同)
- 如果文本来自 prop，请确保像这样传递它： `<Component text={"Line1\nLine2"} />` 而不是 `<Component text="Line1\nLine2" />` （注意添加的大括号） (7认同)
- 如果文本在字符串变量中怎么办？`<Text>{comments}</Text>` 我们不能在那里使用 `{\n}` 逻辑。那怎么办？ (6认同)
- 谢谢你.我最终创建了一个换行组件以便快速访问`var Br = React.createClass({render(){return(<Text> {"\n"} {"\n"} </ Text>)}}) (5认同)
- \ n是换行符 (2认同)
Ven*_*ryx 80
你也可以这样做:
<Text>{`
Hi~
this is a test message.
`}</Text>
在我看来更容易,因为你不必在字符串中插入东西; 只需将其包裹一次,它就会保留所有换行符.
- 到目前为止,这是最干净的解决方案,还有`white-space:pre-line;` (6认同)
- @Tomasz:我认为没有white-space或whiteSpace:-Tetylesheet for <Text> -Tag in react-native - 或者我错了？ (3认同)
- 同意，“white-space: pre-line”的样式是最干净的解决方案，它有效，这实际上就是 html 的工作原理。 (2认同)
- 我同意这是最干净的解决方案，但它不适用于 React Native，这就是问题所在。在本机上没有直接替代“空白”的方法，并且它不适用于所有情况。 (2认同)
Muh*_*man 64
解决方案一：
<Text>
line 1{"\n"}
line 2
</Text>
解决方案2：
<Text>{`
line 1
line 2
`}</Text>
解决方案3：
这是我处理多个<br/>标签的解决方案：
<Text>
line 1{"\n"}
line 2
</Text>
解决方案4：
用于maxWidth自动换行
<Text style={{ maxWidth:200}}>this is a test message. this is a test message</Text>
- 我的赞成票是解决方案 3 中的“white-space: pre-line”，它允许您传入带有“\n”样式中断的变量并渲染它们 (5认同)
小智 26
使用:
<Text>{`Hi,\nCurtis!`}</Text>
结果:
嗨,
柯蒂斯!
- 当消息是字符串变量时，这似乎不起作用：<Text> {message} </ Text> (2认同)
Oli*_*ier 13
这对我有用
<Text>{`Hi~\nthis is a test message.`}</Text>
(反应原生0.41.0)
Edi*_*uza 10
如果您要显示状态变量的数据,请使用此选项.
<Text>{this.state.user.bio.replace('<br/>', '\n')}</Text>
我需要一个在三元运算符中分支的单行解决方案，以保持我的代码很好地缩进。
{foo ? `First line of text\nSecond line of text` : `Single line of text`}
Sublime 语法突出显示有助于突出显示换行符：
更好的是：如果你使用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>
);
}
}
- 这与样式组件无关，无论您是否使用它们都将起作用。 (2认同)
- 我认为上面的评论是说“样式组件”不是提供换行符的东西，所以没有理由使用或提及它作为解决方案。它是提供换行符的模板文字。另外，建议安装新软件包来解决简单问题是没有必要的。 (2认同)
小智 6
这是一个很好的问题，您可以通过多种方式 首先做到这一点
<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>组件周围
快乐编码
/sf/answers/3139206731/ @Edison D'souza 的回答正是我想要的。但是，它只是替换了第一次出现的字符串。这是我处理多个<br/>标签的解决方案：
<Typography style={{ whiteSpace: "pre-line" }}>
{shortDescription.split("<br/>").join("\n")}
</Typography>
抱歉，由于声誉分数限制，我无法对他的帖子发表评论。
小智 5
有两种选择：
选项 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!
| 归档时间： |
|
| 查看次数： |
243759 次 |
| 最近记录： |