如何在 React Native 中渲染从数据库中检索的字符串中的换行符？答案

【问题标题】：How to render in React Native a line break inside a string retrieved from a database?如何在 React Native 中渲染从数据库中检索的字符串中的换行符？
【发布时间】：2019-08-19 23:01:13
【问题描述】：

我无法使用 React Native 让换行符在字符串变量中工作。在我的数据库中，我有一个名为 name 的字段的文档。名称是一个字符串。名称可以包含特定的换行符。在我的 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>

呈现为：
Some\ntitle 或 Some{'\n'}title

而不是：
一些
标题

----------- SOLUTION -----------

// 在数据库中
名称：“一些\n标题”

// 在 React Native 中
{item.name.replace('\n', '\n')}

// 渲染
一些
标题

【问题讨论】：

How can I insert a line break into a <Text> component in React Native?的可能重复
不，就像我的问题中提到的那样 {'\n'} 在这种情况下不起作用
这个问题错过了从数据库中检索字符串的部分。这就是问题可能需要解决的地方。

标签： javascript reactjs react-native

【解决方案1】：

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

Some{"\n"}text

或

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

【讨论】：

您的方法是正确的，但您将如何为动态数据执行此操作？就像这个问题Some Text 来自数据库一样。所以它就像item.name。你将如何在新行中设置item.name？
我已经尝试过了，但没有成功。 Text 组件是 FlatList 组件的 renderItem。 name 是存储在 mongodb 集合中的字符串。 Ankush Rishi 所说的
使用替换 - <Text>{item.name.replace(/\\n/g,'\n')}</Text>

【解决方案2】：

试试这个解决方案：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

whiteSpace 不是 React Native 属性

【解决方案4】：

你可以试试这个方法：

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

【讨论】：

谢谢，但这是不切实际的：当列表中的项目是来自数据库的文档时，内容不是硬编码的组件，换行必须在文档中编码，然后在 React Native 中呈现
不，我想到了，但是组件内的符号并没有改变任何东西：{item.name} 与 {{item.name}}
你能分享更多你的需求或分享更多代码吗？

【解决方案5】：

你能试试这个解决方案吗：我们测试了它，我似乎工作了

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

【讨论】：

我刚刚更新了代码，它对我有用。请检查
我想它也应该对我有用（@estus 解决方案似乎更好）但我无法将它与我的 FlatList 集成

【解决方案6】：

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

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

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

【讨论】：

你做到了！谁是真正的球员？谁是真正的MVP？？
很高兴它有帮助。我建议检查为什么从数据库中检索字符串时会转义，可能还有其他字符需要处理。
是的，会的。感谢您的宝贵时间?
我在下面的评论中提前 30 分钟回答了这个问题。 stackoverflow.com/questions/55410052/…
@lawrencealan 我没有彻底检查其他答案，所以我不知道评论。我不认为这是一场比赛。我只是提供了解决方案和解释。无论如何，评论应该是你答案的一部分，因为这是真正的问题。

【解决方案7】：

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

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

【讨论】：