React Native组件无法插入换行，如何实现文本段落格式化？

你的组件无法生成段落的核心原因是传入的文本没有段落分隔符：你用split(/\n\s*\n/)按空行（\n\n）拆分段落，但当前传入的text是完全连续的字符串，没有任何换行符，所以拆分后只有一个段落，自然看不到段落间距。

下面分两种场景给出解决方案：

场景1：文本本身有段落区分（比如后端返回带空行的内容） #

确保传入的text包含\n\n作为段落分隔符，同时可以优化组件样式让段落更清晰：

组件代码（优化版） #

import React from 'react';
import { Text, View } from 'react-native';

const ProductDescription = ({ text }) => {
  // 按空行拆分段落，兼容中间有空白字符的情况，同时过滤空段落
  const paragraphs = text.split(/\n\s*\n/).filter(para => para.trim());

  return (
    <View style={{ paddingHorizontal: 20 }}>
      {paragraphs.map((paragraph, index) => (
        <Text 
          key={index} 
          style={{ 
            marginBottom: 16, // 段落间的垂直间距
            lineHeight: 24, // 提升文本可读性
          }}
        >
          {paragraph.trim()}
        </Text>
      ))}
    </View>
  );
};

export default ProductDescription;

使用方式（带空行分隔的文本） #

<ProductDescription
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget est leo.\n\nSed fermentum, ante vitae ultricies lacinia, lacus quam sagittis turpis, vitae ultrices magna metus at purus. Nam malesuada diam diam, in faucibus libero consequat eu.\n\nNulla facilisi. Phasellus malesuada nibh vel urna tincidunt malesuada. Nullam nec dolor in neque rutrum bibendum."
/>

场景2：文本是完全连续的长文本，需要自动分段 #

如果文本没有自然段落，可按固定字符数拆分（避免截断单词），示例如下：

import React from 'react';
import { Text, View } from 'react-native';

const ProductDescription = ({ text, maxCharsPerPara = 300 }) => {
  const paragraphs = [];
  let currentParagraph = '';
  const words = text.split(' ');

  // 按单词拼接，避免截断单词
  for (const word of words) {
    if ((currentParagraph + word).length > maxCharsPerPara) {
      paragraphs.push(currentParagraph.trim());
      currentParagraph = `${word} `;
    } else {
      currentParagraph += `${word} `;
    }
  }
  // 加入最后一段内容
  if (currentParagraph) paragraphs.push(currentParagraph.trim());

  return (
    <View style={{ paddingHorizontal: 20 }}>
      {paragraphs.map((para, index) => (
        <Text 
          key={index} 
          style={{ 
            marginBottom: 16,
            lineHeight: 24,
          }}
        >
          {para}
        </Text>
      ))}
    </View>
  );
};

export default ProductDescription;

简化方案：用样式实现自动识别换行 #

如果不需要拆分多个Text组件，可直接用whiteSpace: 'pre-line'样式，让Text组件自动识别文本中的换行和空行：

import React from 'react';
import { Text } from 'react-native';

const ProductDescription = ({ text }) => {
  return (
    <Text 
      style={{ 
        padding: 20,
        lineHeight: 24,
        whiteSpace: 'pre-line' // 解析文本中的\n为换行，\n\n为段落间距
      }}
    >
      {text}
    </Text>
  );
};

export default ProductDescription;

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