如何在React Native的组件中插入换行符?

2020/09/30 17:41 · javascript ·  · 0评论

我想在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.

应该这样做:

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

您也可以这样做:

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

我认为这很容易,因为您不必在字符串中插入内容。只需包装一次,即可保留所有换行符。

用:

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

结果:

你好

柯蒂斯!

这对我有用

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

(本机0.41.0)

如果根本要显示状态变量中的数据,请使用它。

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

您可以将其{'\n'}用作换行符。嗨〜{'\ n'},这是一条测试消息。

更好的是:如果您使用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>
  );
 }

}

您可以尝试这样使用

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

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

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

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

崇高语法高亮

您可以这样使用``:

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

您可以按照以下步骤进行操作:

{“创建\ n您的帐户”}

您也可以将其作为常量添加到渲染方法中,以便易于重用:

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

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

<Text>

   Hello {'\n'}

   World!

</Text>

最干净,最灵活的方法之一就是使用Template Literals

使用此方法的一个好处是,如果要在文本主体中显示字符串变量的内容,它会更简洁明了。

(请注意反引号字符的用法)

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

会导致

Hi~
This is a test message

https://stackoverflow.com/a/44845810/10480776 @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>

显示:
在此处输入图片说明

如果有人在寻找一种解决方案,而您想为数组中的每个字符串换行,则可以执行以下操作:

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

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

<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;
<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>
    )
}}

使用\n文本和CSSwhite-space: pre-wrap;

本文地址:http://javascript.askforanswer.com/ruhezaireact-nativedezujianzhongcharuhuanxingfu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!