这应该可以做到!

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

下面是一个使用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>

显示:

这对我很有效

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

(react-native 0.41.0)

你可以这样做:

{'创建\ nYour帐户'}

这应该做到:

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

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