如何将换行符插入到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. 

Answer 1

我现在无法testing，但是应该这样做：

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

在这里演示

Answer 2

你也可以这样做：

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

在我看来更容易，因为你不必在string中插入东西; 只是包装一次，它保持所有的换行符。

Answer 3

这对我有效

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

（反应原生0.41.0）

Answer 4

如果您正在显示来自状态variables的数据，请使用它。

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

Answer 5

我需要一个在三元运算符分支的单行解决scheme，以保持我的代码很好地缩进。

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

崇高的语法突出显示有助于突出显示换行符：

Answer 6

您可以在string的末尾添加.replace 。 例如

 <Text style={styles.cellTitle} numberOfLines={2}> {item.name.replace('\n', ' ')} </Text> 

这将用单个空格replace\ n。

Answer 7

您可以使用{'\n'}作为换行符。 嗨〜{'\ n'}这是一个testing信息。