entityMap|blocks|key|3n4ql|text|这应该可以做到这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|eurng|Hi~{"\n"}
this+is+a+test+message.|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

This should do it:

<pre><code>&lt;Text&gt;
Hi~{"\n"}
this is a test message.
&lt;/Text&gt;
</code></pre>

entityMap|blocks|key|1d3au|text|您还可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6f7c4|{`
Hi~
this+is+a+test+message.
`}|code-block|syntax|javascript|538gi|在我看来更简单，因为您不必在字符串中插入内容；只需将它换行一次，它就会保留所有的换行符。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|K|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|L|9|@]|A|@]|B|$]]]]

You can also do:

<pre><code>&lt;Text&gt;{`
Hi~
this is a test message.
`}&lt;/Text&gt;
</code></pre>

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.

entityMap|blocks|key|ferc2|text|这对我很有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9g9qh|{`Hi~\nthis+is+a+test+message.`}|code-block|syntax|javascript|b3f3i|(react-native+0.41.0)^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|K|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|L|9|@]|A|@]|B|$]]]]

This worked for me 

<pre><code>&lt;Text&gt;{`Hi~\nthis is a test message.`}&lt;/Text&gt;
</code></pre>

(react-native 0.41.0)

entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/actteam/1252fd226635d7932eb2e781503af591.png|imageAlt|blocks|key|eg2vv|text|我需要一个在三元运算符中进行分支的单行解决方案，以保持代码的良好缩进。|unstyled|depth|inlineStyleRanges|entityRanges|99uia|{foo+?+`First+line+of+text\nSecond+line+of+text`+:+`Single+line+of+text`}|code-block|syntax|javascript|58nn|Sublime语法突出显示有助于突出显示换行符：|9cndj|​|8b2pd|fps37|?|atomic|offset|length|39thc|ckiuj^0|0|0|0|0|0|0|1|0|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]]|A|@$B|C|D|E|2|F|G|10|H|@]|I|@]|6|$]]|$B|J|D|K|2|L|G|11|H|@]|I|@]|6|$M|N]]|$B|O|D|P|2|F|G|12|H|@]|I|@]|6|$]]|$B|Q|D|R|2|F|G|13|H|@]|I|@]|6|$]]|$B|S|D|-4|2|F|G|14|H|@]|I|@]|6|$]]|$B|T|D|U|2|V|G|15|H|@]|I|@$W|16|X|17|B|18]]|6|$]]|$B|Y|D|-4|2|F|G|19|H|@]|I|@]|6|$]]|$B|Z|D|R|2|F|G|1A|H|@]|I|@]|6|$]]]]

I needed a one-line solution branching in a ternary operator to keep my code nicely indented. 

<pre class="lang-js prettyprint-override"><code>{foo ? `First line of text\nSecond line of text` : `Single line of text`}
</code></pre>

Sublime syntax highlighting helps highlight the line-break character: 

<a href="https://i.stack.imgur.com/nV1xt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nV1xt.png" alt="Sublime syntax highlight"></a>

entityMap|blocks|key|8j960|text|如果要显示来自状态变量的数据，请使用此命令。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6olcr|{this.state.user.bio.replace('
',+'\n')}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

If at all you are displaying data from state variables, use this.

<pre><code>&lt;Text&gt;{this.state.user.bio.replace('&lt;br/&gt;', '\n')}&lt;/Text&gt;
</code></pre>

entityMap|blocks|key|58d28|text|您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1lvba|换行符。您好~+{'\n'}这是一条测试消息。^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

You can use <code>{'\n'}</code> as line breaks. 
 
 Hi~ {'\n'} this is a test message.

entityMap|blocks|key|fsfh6|text|使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3kke5|{`Hi,\nCurtis!`}|code-block|syntax|javascript|ae2dl|结果：|6df4t|嗨，|b00tj|柯蒂斯！^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|O|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|P|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|Q|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|R|9|@]|A|@]|B|$]]]]

Use:

<pre><code>&lt;Text&gt;{`Hi,\nCurtis!`}&lt;/Text&gt;
</code></pre>

Result:

<blockquote>
 Hi,
 
 Curtis!
</blockquote>

entityMap|blocks|key|fn8b1|text|您可以尝试像这样使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3fs1o|{`${val}\n`}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

You can try using like this 

<pre><code>&lt;text&gt;{`${val}\n`}&lt;/text&gt;
</code></pre>

entityMap|blocks|key|1i5i6|text|更好的是:如果您使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2eq7m|，你可以这样做：|e1fm8|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+(
++++
++++++{`
++++++++1.+line+1
++++++++2.+line+2
++++++++3.+line+3
++++++`}
++++
++);
+}

}|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

EDIT :
if you use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals" rel="nofollow noreferrer">Template Literals</a> (see within the <code>&lt;Text&gt;</code> element) , you can also just add the line breaks like this:
<pre><code>import React, { Component } from 'react';
import { Text, View } from &quot;react-native&quot;;

export default class extends Component {

 (...)

 render(){
 return (
 &lt;View&gt;
 &lt;Text&gt;{`
 1. line 1
 2. line 2
 3. line 3
 `}&lt;/Text&gt;
 &lt;/View&gt;
 );
 }
}
</code></pre>

entityMap|blocks|key|sct3|text|有两个选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|chm0k|选项1：|2fsf3|使用模板文字。|1m9t9|const+Message+=+'This+is+a+message';


{`
++Hi~
++${Message}
`}|code-block|syntax|javascript|3do07|结果：|83flg|Hi~
This+is+a+message|fv4u|选项2：|60hsc|使用{'\n'}作为换行符。|ovgl|Hello+{'\n'}

+++World!|18of9|3re5n|Hello
World!^0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Y|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|Z|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|10|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|11|9|@]|A|@]|B|$J|K]]|$2|L|4|M|6|7|8|12|9|@]|A|@]|B|$]]|$2|N|4|O|6|I|8|13|9|@]|A|@]|B|$J|K]]|$2|P|4|Q|6|7|8|14|9|@]|A|@]|B|$]]|$2|R|4|S|6|7|8|15|9|@]|A|@]|B|$]]|$2|T|4|U|6|I|8|16|9|@]|A|@]|B|$J|K]]|$2|V|4|M|6|7|8|17|9|@]|A|@]|B|$]]|$2|W|4|X|6|I|8|18|9|@]|A|@]|B|$J|K]]]]

There are two options:
Option 1: Using Template Literals.
<pre><code>const Message = 'This is a message';

&lt;Text&gt;
{`
 Hi~
 ${Message}
`}
&lt;/Text&gt;
</code></pre>
Result:
<pre><code>Hi~
This is a message
</code></pre>
Option 2: Use {'\n'} as line breaks.
<pre><code>&lt;Text&gt;

 Hello {'\n'}

 World!

&lt;/Text&gt;
</code></pre>
Result:
<pre><code>Hello
World!
</code></pre>

I want to insert a new line (like \r\n, &lt;br /&gt;) in a Text component in React Native.
If I have:
<pre><code>&lt;text&gt;
&lt;br /&gt;
Hi~&lt;br /&gt;
this is a test message.&lt;br /&gt;
&lt;/text&gt;
</code></pre>
Then React Native renders <code>Hi~ this is a test message.</code>
Is it possible render text to add a new line like so:
<pre><code>Hi~
this is a test message.
</code></pre>

How can I insert a line break into a <Text> component in React Native?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

 我想插入一个新行(如\r\n， )在React Native中的文本组件中。 如果我有： Hi~this is a test message. 然后反应原生渲染 是否可以渲染文本以添加新行，如下所示： Hi~this is a test message.

问如何在React Native中将换行符插入<Text>组件？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React Native中将换行符插入<Text>组件？EN