IT技术 - 如何在 React Native 的 <Text> 组件中插入换行符？ - 吾爱随笔录

IT技术 javascript text react-native newline

2021-03-13 22:31:50

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

6个回答

这应该这样做：

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

谢谢你。我最终制作了一个换行符组件以便快速访问 var Br = React.createClass({ render() { return ( <Text> {"\n"}{"\n"} </Text> ) } })

2021-04-21 22:31:50

如果文本在字符串变量中怎么办？<Text>{comments}</Text>我们不能使用{\n}那里的逻辑。那怎么办？

2021-04-28 22:31:50

有没有办法用变量中的字符串来做到这一点，所以我可以使用：<Text>{content}</Text>？

2021-05-07 22:31:50

\n 是换行符

2021-05-08 22:31:50

如果文本来自道具，请确保像这样传递它：<Component text={"Line1\nLine2"} />而不是 <Component text="Line1\nLine2" />（注意添加的花括号）

2021-05-12 22:31:50

你也可以这样做：

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

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

我想空白样式应该删除意图空间，对吗？如果是，我非常需要它，否则字符串文字会变得非常丑陋......

2021-04-22 22:31:50

@Tomasz：我认为没有空格或 whiteSpace: -Stylesheet for <Text>-Tag in react-native - 还是我错了？

2021-04-27 22:31:50

@Xerus 您可以只使用文本后处理器来删除缩进，如下所示：gist.github.com/Venryx/84cce3413b1f7ae75b3140dd128f944c

2021-04-27 22:31:50

与接受的答案相比，模板文字干净整洁

2021-04-28 22:31:50

这是迄今为止最干净的解决方案，连同 white-space: pre-line;

2021-05-07 22:31:50

利用：

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

结果：

你好，

柯蒂斯！

你可以使用这样的函数： splitLine = message => { ... } 并在其中使用 RegExp，然后 <Text>{this.splitLine(message)}</Text>

2021-04-19 22:31:50

当消息是字符串变量时，这似乎不起作用：<Text>{message}</Text>

2021-05-08 22:31:50

这对我有用

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

（react-native 0.41.0）

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

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

其它你可能感兴趣的问题