React Native中如何实现文本遇句末句号自动换行？

你可以通过两种简单方式实现按句号换行的需求：

方法一：字符串替换（快速实现） #

直接将文本中的句号替换为「句号+换行符」，React Native的<Text>组件会识别\n并自动换行：

修改渲染部分的代码：

<SecondStoryContainer>
  <CardMainTxt>
    {mainStory.replaceAll('.', '.\n')}
  </CardMainTxt>
</SecondStoryContainer>

如果你的React Native版本不支持replaceAll，可以用正则替换做兼容：

{mainStory.replace(/\./g, '.\n')}

方法二：拆分句子渲染（更灵活） #

如果需要对每个句子单独设置样式，或者处理特殊标点组合（比如示例中的?.），可以拆分句子后逐个渲染：

<SecondStoryContainer>
  <CardMainTxt>
    {mainStory.split('.').filter(sentence => sentence.trim()).map((sentence, index) => (
      <Text key={index}>{sentence.trim()}.{'\n'}</Text>
    ))}
  </CardMainTxt>
</SecondStoryContainer>

• split('.')：按句号拆分文本
• filter：过滤拆分后产生的空字符串
• map：遍历每个句子，补回句号并添加换行，同时给每个元素添加唯一key

注意事项 #

• 如果文本中有省略号（比如...），可以把正则调整为/(?<!\.)\.(?!\.)/g，避免替换省略号中的句号
• 换行后的行间距可以通过CardMainTxt的lineHeight样式调整

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