Javascript 如何在 React Native 的 <Text> 组件中插入换行符？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32469570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I insert a line break into a <Text> component in React Native?
提问by Curtis
I want to insert a new line (like \r\n, <br />) in a Text component in React Native.
我想在 React Native 的 Text 组件中插入一个新行（如 \r\n, <br />）。
If I have:
如果我有：
<text><br />
Hi~<br >
this is a test message.<br />
</text>
Then React Native renders Hi~ this is a test message.
然后 React Native 渲染 Hi~ this is a test message.
Is it possible render text to add a new line like so:
是否可以渲染文本以添加新行，如下所示：
Hi~
this is a test message.
回答by Chris Ghenea
This should do it:
这应该这样做：
<Text>
Hi~{"\n"}
this is a test message.
</Text>
回答by Venryx
You can also do:
你也可以这样做：
<Text>{`
Hi~
this is a test message.
`}</Text>
Easier in my opinion, because you don't have to insert stuff within the string; just wrap it once and it keeps all your line-breaks.
我认为更容易，因为您不必在字符串中插入内容；只需将其包装一次即可保留所有换行符。
回答by COdek
Use:
用：
<Text>{`Hi,\nCurtis!`}</Text>
Result:
结果：
Hi,
Curtis!
你好，
柯蒂斯！
回答by Olivier
This worked for me
这对我有用
<Text>{`Hi~\nthis is a test message.`}</Text>
(react-native 0.41.0)
（反应原生 0.41.0）
回答by Edison D'souza
If at all you are displaying data from state variables, use this.
如果您要显示来自状态变量的数据，请使用它。
<Text>{this.state.user.bio.replace('<br/>', '\n')}</Text>
回答by Vijay Suryawanshi
You can use {'\n'}as line breaks.
Hi~ {'\n'} this is a test message.
您可以{'\n'}用作换行符。嗨~ {'\n'} 这是一条测试消息。
回答by Telmo Dias
Better yet:
if you use styled-components, you can do something like this:
更好的是：如果你使用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>
);
}
}
回答by Pankaj Agarwal
You can try using like this
你可以尝试这样使用
<text>{`${val}\n`}</text>
回答by Beau Smith
I needed a one-line solution branching in a ternary operator to keep my code nicely indented.
我需要一个在三元运算符中分支的单行解决方案，以保持我的代码很好地缩进。
{foo ? `First line of text\nSecond line of text` : `Single line of text`}
Sublime syntax highlighting helps highlight the line-break character:
Sublime 语法突出显示有助于突出显示换行符：
回答by Tim J
You can also just add it as a constant in your render method so its easy to reuse:
您也可以将其作为常量添加到渲染方法中，以便于重用：
render() {
const br = `\n`;
return (
<Text>Capital Street{br}Cambridge{br}CB11 5XE{br}United Kingdom</Text>
)
}
