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

Question

我想在 React Native 的文本组件中插入一个新行（如 \r\n、
）。

如果我有：

<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

应该这样做：

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

Answer 2

您还可以这样做：

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

我认为更简单，因为您不必在字符串中插入内容；只需将它包装一次，它就会保留你所有的换行符。

Answer 3

这对我有用

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

(react-native 0.41.0)

Answer 4

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

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

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

Answer 5

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

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

Answer 6

您可以使用 {'\n'} 作为换行符。嗨~ {'\n'} 这是一条测试消息。

Answer 7

使用：

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

结果：

Hi,

Curtis!

Answer 8

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

Answer 9

你可以试试这样使用

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

Answer 10

编辑：

如果您使用 Template Literals（请参阅 <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>
  );
 }
}

Answer 11

你可以像这样使用``:

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

Answer 12

您可以按如下方式进行：

{'Create\nYour Account'}

Answer 13

如果有人正在寻找一种解决方案，您希望为数组中的每个字符串换行，您可以这样做：

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

Answer 14

您也可以将它作为常量添加到渲染方法中，以便于重复使用：

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

Answer 15

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

Answer 16

只需将 {'\n'} 放在文本标签内

<Text>

   Hello {'\n'}

   World!

</Text>

Answer 17

在数组中定义的文本行之间插入   的另一种方法：

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;

Answer 18

最干净、最灵活的方法之一是使用 Template Literals。

使用这个的一个好处是，如果你想在文本正文中显示字符串变量的内容，它更清晰直接。

(请注意反引号的用法)

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

会导致

Hi~
This is a test message

Answer 19

@Edison D'souza 的回答正是我要找的。但是，它只是替换字符串的第一次出现。这是我处理多个   标签的解决方案：

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

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

Answer 20

这是使用 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>

显示：

Answer 21

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

Answer 22

为什么这么努力？现在是 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>
    )
}}

Answer 23

简单使用反引号（ES 6 特性）

解决方案 1

const Message = 'This is a message';

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

解决方案 2 在文本中添加“\n”

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

Answer 24

React 不会喜欢您将 HTML   放在它期望文本的位置，并且 \n 并不总是呈现，除非在 <pre> 标记中。

也许将每个换行字符串（段落）包装在一个  标记中，如下所示：

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

如果您正在迭代 React 组件，请不要忘记 key。

Answer 25

这样做：

<Text>

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

<Text/>

Answer 26

这是一个很好的问题，您可以通过多种方式解决这个问题 第一个

<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> 组件并将其包裹在 < 文本>组件

快乐编码

Answer 27

如果您从 state variable or props 获取数据，Text 组件有一个带有 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%

Answer 28

此代码适用于我的环境。 (反应本机 0.63.4)

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

const textWithChangeLine = "abc\ndef"

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

结果

abc
def

Answer 29

嘿，像这样放它们对我有用！

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

Answer 30

我使用 p 标签 作为新行。所以我在这里粘贴了代码。这对任何人都有帮助。

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

Answer 31

有时候我是这样写的：

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

（因为我自己看起来更清楚）

Answer 32

2021，这适用于 REACT 状态值 （您必须添加空 div，就像 return 语句一样）

this.setState({form: (<> line 1 line 2 </>) })

Answer 33

解决方案 1：

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

解决方案 2：

 <Text>{`
  line 1
  line 2
 `}</Text>

解决方案 3：

这是我处理多个   标签的解决方案：

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

Answer 34

最好的方法是使用 UL 或 OL 之类的列表，并进行一些样式设置，例如制作列表样式 none，然后您可以使用 <li> dhdhdhhd </li>

Answer 35

我知道这已经很老了，但我想出了一个自动换行的解决方案，它允许您以通常的方式传递文本（没有诡计）

我创建了以下组件

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>

Answer 36

这应该可以解决问题！[=11=]

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

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

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

javascript

text

newline

react-native

解决方案 1：

解决方案 2：

解决方案 3：

解决方案 4：