下面是一个使用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- nativenew -break-line-example

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

解决方案1

const Message = 'This is a message';

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

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

<Text>
Hi~{"\n"}
This is a 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>
    )
}}

这对我很有效

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

(react-native 0.41.0)

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

< div > <p style={{fontWeight: "bold"，空格:"pre-wrap"}}> {"} 你好{" \ n "} < / p > {" \ n "} <p>我在这里</p> < / div >