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

Posted 2023-02-22

【中文标题】如何在 React Native 中渲染从数据库中检索的字符串中的换行符？

【英文标题】：How to render in React Native a line break inside a string retrieved from a database?

【发布时间】：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' 在这种情况下不起作用

这个问题错过了从数据库中检索字符串的部分。这就是问题可能需要解决的地方。

【参考方案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 分钟回答了这个问题。 ***.com/questions/55410052/…

@lawrencealan 我没有彻底检查其他答案，所以我不知道评论。我不认为这是一场比赛。我只是提供了解决方案和解释。无论如何，评论应该是你答案的一部分，因为这是真正的问题。

【参考方案7】：

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

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