React Native中如何用<pre>或类似方法将换行保存至数据库？

嘿，这个问题我之前也踩过坑！核心是要确保换行符在前端提交→后端接收→数据库存储→取出展示的整个流程里都没被丢失或错误转义，下面一步步给你拆解解决思路：

第一步：确认前端提交的内容包含换行符 #

React Native开启multiline={true}的TextInput，输入的换行会以\n的形式存在于你的state中。你可以先在提交前打个log验证一下：

onQuestionSubmit() {
  // 先打印内容，检查是否包含\n
  console.log('待提交内容:', this.state.blahblah);
  fetch('url', {
    credentials: 'same-origin',
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      databaserow: this.state.blahblah,
    }),
  })
}

如果log里能看到\n，说明前端这边没问题，接下来看后端处理。

第二步：后端Express确保正确接收换行符 #

只要你用了Express默认的body-parser（4.x版本已集成）解析JSON请求，req.body.databaserow里的\n会被完整保留。同样在后端加个log确认：

// 示例接口逻辑
app.post('/submit-content', (req, res) => {
  const userInput = req.body.databaserow;
  console.log('后端接收内容:', userInput); // 检查是否存在\n
  // 插入数据库的逻辑（以MySQL为例）
  db.query('INSERT INTO your_table (content) VALUES (?)', [userInput], (err) => {
    if (err) return res.status(500).send(err);
    res.send('保存成功');
  });
});

这里要注意：别手动转义\n，主流数据库（MySQL、MongoDB、PostgreSQL等）都支持直接存储\n字符。

第三步：展示时正确渲染换行 #

如果数据库已经存了带\n的内容，接下来就是根据展示端的不同处理换行：

Web端（React）展示： #

用<pre>标签是最直接的方式，它会自动保留换行和空格：

// 用pre标签包裹内容，可加样式优化显示
<pre style={{ fontSize: 16, whiteSpace: 'pre-wrap' }}>{contentFromDB}</pre>

或者给普通div加CSS样式white-space: pre-line，既保留换行，又自动折叠多余空格：

<div style={{ whiteSpace: 'pre-line', fontSize: 16 }}>{contentFromDB}</div>

React Native端展示： #

React Native的<Text>组件默认就能识别\n并换行，直接使用即可：

<Text style={{ fontSize: 16, textAlign: 'left' }}>{contentFromDB}</Text>

特殊情况：如果数据库里存的是\\n（转义后的换行符） #

偶尔会因为中间层处理不当，导致数据库里的换行变成\\n，这时候需要在取出内容时转回来：

const fixedContent = contentFromDB.replace(/\\n/g, '\n');

总结一下：整个流程的关键是保证\n在每一步都没被篡改，展示时用对应端的方式解析它就行——<pre>是Web端的常用方案，React Native端直接用Text组件就能搞定～

内容的提问来源于stack exchange，提问作者craftdeer