在文本和css空格中使用\n: pre-wrap;

这段代码适用于我的环境。(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

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

<Text>

   Hello {'\n'}

   World!

</Text>

你可以这样做:

{'创建\ nYour帐户'}

你可以像这样使用' ':

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

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

我创建了以下组件

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>