如何将换行符插入文本<组件在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.
815710 次浏览
小开
最佳答案

这应该做到:

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

你还可以:

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

在我看来更简单，因为你不需要在字符串中插入东西;只要换行一次，就能保留所有换行符。

小开

这对我很有效

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

(react-native 0.41.0)

小开

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

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

Sublime语法高亮显示有助于突出显示换行字符:

Sublime语法高光

小开

如果您要显示来自状态变量的数据，请使用此方法。

<Text>{this.state.user.bio.replace('<br/>', '\n')}</Text>
小开
你可以使用{'\n'}作为换行符。 嗨~ {'\n'}这是一个测试消息。

小开

使用:

<Text>{`Hi,\nCurtis!`}</Text>

结果:

你好,

柯蒂斯!

小开

在文本中使用\n, css使用white-space: pre-wrap;

小开

你可以试试这样用

<text>{`${val}\n`}</text>
小开

编辑:

如果你使用模板文字(在<Text>元素中)，你也可以像这样添加换行符:

import React, { Component } from 'react';
import { Text, View } from "react-native";


export default class extends Component {


(...)


render(){
return (
<View>
<Text>{`
1. line 1
2. line 2
3. line 3
`}</Text>
</View>
);
}
}
小开

你可以像这样使用' ':

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

你可以这样做:

{'创建\ nYour帐户'}

小开

如果有人正在寻找一个解决方案，你想要在数组中的每个字符串有一个新的行，你可以这样做:

import * as React from 'react';
import { Text, View} from 'react-native';




export default class App extends React.Component {
constructor(props) {
super(props);


this.state = {
description: ['Line 1', 'Line 2', 'Line 3'],
};
}


render() {
// Separate each string with a new line
let description = this.state.description.join('\n\n');


let descriptionElement = (
<Text>{description}</Text>
);


return (
<View style=\{\{marginTop: 50}}>
{descriptionElement}
</View>
);
}
}

请参阅“小吃”的实际示例:https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example

小开

你也可以把它作为一个常量添加到你的渲染方法中，这样很容易重用:

  render() {
const br = `\n`;
return (
<Text>Capital Street{br}Cambridge{br}CB11 5XE{br}United Kingdom</Text>
)
}
小开

只需在想要断行的地方使用{"\n"}

小开

只需将{'\n'}放在Text标签中

<Text>


Hello {'\n'}


World!


</Text>
小开

另一种方法是在数组中定义的文本行之间插入<br>:

import react, { Fragment } from 'react';


const lines = [
'One line',
'Another line',
];


const textContent =
lines.reduce(items, line, index) => {
if (index > 0) {
items.push(<br key={'br-'+index}/>);
}
items.push(<Fragment key={'item-'+index}>{line}</Fragment>);
return items;
}, []);

然后文本可以作为变量使用:

<Text>{textContent}</Text>

如果不可用，Fragment可以这样定义:

const Fragment = (props) => props.children;
小开

最干净和最灵活的方法之一是使用模板文字。

使用它的一个优点是，如果你想在文本体中显示字符串变量的内容，它更干净和直接。

(请注意使用反引号)

const customMessage = 'This is a test message';
<Text>
{`
Hi~
${customMessage}
`}
</Text>

会导致

Hi~
This is a test message
小开

@Edison D'souza的答案正是我一直在寻找的。但是，它只是替换字符串的第一次出现。以下是我处理多个<br/>标签的解决方案:

<Typography style=\{\{ whiteSpace: "pre-line" }}>
{shortDescription.split("<br/>").join("\n")}
</Typography>

抱歉，由于声誉评分限制，我无法评论他的帖子。

小开

下面是一个使用TypeScript的React(不是React Native)的解决方案。

同样的概念也适用于React Native

import React from 'react';


type Props = {
children: string;
Wrapper?: any;
}


/**
* Automatically break lines for text
*
* Avoids relying on <br /> for every line break
*
* @example
* <Text>
*   {`
*     First line
*
*     Another line, which will respect line break
*  `}
* </Text>
* @param props
*/
export const Text: React.FunctionComponent<Props> = (props) => {
const { children, Wrapper = 'div' } = props;


return (
<Wrapper style=\{\{ whiteSpace: 'pre-line' }}>
{children}
</Wrapper>
);
};


export default Text;

用法:

<Text>
{`
This page uses server side rendering (SSR)


Each page refresh (either SSR or CSR) queries the GraphQL API and displays products below:
`}
</Text>
< p >显示: # EYZ0 < / p >
小开 
<Text>
Hi~{"\n"}
this is a test message.
</Text>
小开

为什么这么努力工作?现在是2020年，创建一个组件来处理这类问题

    export class AppTextMultiLine extends React.PureComponent {
render() {
const textArray = this.props.value.split('\n');
return (
<View>
{textArray.map((value) => {
return <AppText>{value}</AppText>;
})}
</View>
)
}}
小开

简单使用反勾号(es6特性)

解决方案1

const Message = 'This is a message';


<Text>
{`
Hi~
${Message}
`}
</Text>

解决方案2添加"\n"在文本

<Text>
Hi~{"\n"}
This is a message.
</Text>
小开

React不会喜欢你把HTML <br />放在它需要文本的地方，而且# eyz1并不总是被渲染，除非在<pre>标签中。

也许可以像这样将每个断行字符串(段落)包装在<p>标签中:

{text.split("\n").map((line, idx) => <p key={idx}>{line}</p>)}

如果你在迭代React组件，不要忘记使用key。

小开

这样做:

<Text>


{ "Hi~ \n this is a test message." }


<Text/>

小开

这是一个很好的问题，你可以用多种方式来做这个问题 第一个< / >强

<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>

# EYZ0>组件内第一<视图>然后把它包在<< / em >组件

快乐的编码

小开

如果你从state variable or props中获取数据，文本组件有一个minWidth, maxWidth样式道具。

例子

const {height,width} = Dimensions.get('screen');


const string = `This is the description coming from the state variable, It may long thank this`


<Text style=\{\{ maxWidth:width/2}}>{string}</Text>

这将显示屏幕宽度的50%的文本

小开

这段代码适用于我的环境。(react-native 0.63.4)

const charChangeLine = `
`
// const charChangeLine = "\n" // or it is ok


const textWithChangeLine = "abc\ndef"


<Text>{textWithChangeLine.replace('¥n', charChangeLine)}</Text>

结果

abc
def
小开

嘿，把它们这样放，这对我很有用!

   <div>
<p style=\{\{ fontWeight: "bold", whitespace: "pre-wrap" }}>
{" "}
Hello {"\n"}
</p>
{"\n"}
<p>I am here</p>
</div>
小开

我使用p标签作为新行。这里我粘贴了代码，这对大家都有帮助。

const new2DArr =  associativeArr.map((crntVal )=>{
return <p > Id :  {crntVal.id} City Name : {crntVal.cityName} </p>;
});
小开

有时我会这样写:

<Text>
You have {" "}
{remaining}$ {" "}
from{" "}
{total}$
<Text>

(因为我自己看得更清楚)

小开

2021，这适用于REACT状态值(你必须添加空divs，就像一个返回语句)

# EYZ0

小开

解决方案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>
小开

最好的方法使用列表，如UL或OL，并做一些样式，如使列表样式none，你可以使用<li> dhdhdhhd </li>

小开

我知道这是相当古老的，但我提出了一个自动断行的解决方案，允许您以通常的方式传递文本(没有诡计)

我创建了以下组件

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 style=\{\{styles.text}}>{`Hi~\nthis is a test message.`}</Text>
小开

对此有两种主要的解决方案。

方法1:像下面这样添加'\n'

<Text>
First Line {'\n'} Second Line.
</Text>

方法2:在字符串字面量中添加换行符，如下所示。

 <Text>
`First Line
Second Line`.
</Text>

要了解更多信息，请参考下面的教程。

https://sourcefreeze.com/how-to-insert-a-line-break-into-a-text-component-in-react-native/


提交答案