如何在React Native中呈现从数据库检索到的字符串内的换行符？

Question

我无法在React Native的字符串变量中使用换行符。 在我的数据库中，我有带有名称字段的文档。名称是一个字符串。名称可以包含特定的换行符。数据在我的React Native组件中获取并呈现在FlatList中。

我尝试了以下各种组合：

• \ n
• {'\ n'}

它们都不起作用，换行符呈现为文本

\\ In database document
name: "Some\ntitle"
\\ or
name: "Some{'\n'}title"

\\ In React Native (simplified)
<FlatList
    renderItem={
        <Text>{item.name}<\Text>
    }
>
<\FlatList>

它呈现为：
某些\ ntitle 或某些{'\ n'}标题

代替：
一些
标题

-----------解决方案-----------

//在数据库中
名称：“ Some \ ntitle”

//在React Native中
{item.name.replace（'\ n'，'\ n'）}

//渲染
一些
标题

Answer 1

使用{"\n"}代替\n：

Some{"\n"}text

或

<Text>{`Some\ntext`}</Text>

Answer 2

尝试以下解决方案：

   {item.name.split("\n").map((i,key) => {
      return <Text key={key}>{i}</Text>;
   })}

Answer 3

尝试使用style={{ whiteSpace: "pre" }}对组件进行样式设置以保留空格

<Text style={{ whiteSpace: "pre" }}>{item.name}</Text>

Answer 4

您可以尝试这种方式：

<Text>{`{item.name}`}</Text>

Answer 5

您可以尝试此解决方案吗：我们已经对其进行了测试，并且我似乎可以正常工作

'bitcoin'

Answer 6

\n换行从字面上出现意味着它在某个时候被转义了，实际上是\\n。

可以是{item.name.replace('\\n', '\n')}。

实际的问题是它根本没有被逃脱。这可能会影响其他转义序列，应在转义字符串的地方解决。

Answer 7

使用正则表达式，将所有 \\n 替换为 \n

const t = d.replace(/\\n/g, "\n");