React Native中如何将带<strong>标签的动态文本渲染为粗体？

实现思路 #

后端返回的<strong>和</strong>是HTML实体转义后的加粗标签，只需两步即可实现对应效果：

1. 把转义的HTML实体还原为正常的strong标签
2. 用正则拆分文本为普通段落和加粗段落，分别用对应样式的Text组件渲染

完整代码实现 #

import { Text } from 'react-native';

// 文本解析方法，入参为后端返回的原始动态文本
const renderBoldText = (rawText) => {
  // 先还原转义的标签实体
  const decodedText = rawText.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
  // 拆分出所有被strong标签包裹的片段和普通文本片段
  const segmentList = decodedText.split(/(<strong>.*?<\/strong>)/g).filter(Boolean);

  return segmentList.map((segment, index) => {
    // 匹配加粗内容
    const boldContent = segment.match(/^<strong>(.*?)<\/strong>$/);
    if (boldContent) {
      return <Text key={index} style={{ fontWeight: 'bold' }}>{boldContent[1]}</Text>
    }
    // 普通内容直接渲染
    return <Text key={index}>{segment}</Text>
  })
}

业务调用示例 #

const MessageItem = () => {
  // 模拟后端返回的原始文本
  const rawMessage = "This is a message that has a phone number that needs to be bold. Please call: <strong>888-888-8888</strong>";

  // 直接在Text组件内调用解析方法即可
  return <Text style={{ fontSize: 14, color: '#333' }}>{renderBoldText(rawMessage)}</Text>
}

上述示例渲染后的中文效果为：

这是一条包含需要加粗的电话号码的消息，请拨打：888-888-8888

注意事项 #

• 正则使用非贪婪匹配规则.*?，可支持同一段文本内多个加粗标签的识别，不会出现串标签问题
• 若文本中包含其他转义实体（比如&对应&），可在实体还原步骤新增对应替换规则即可
• 如需支持斜体等其他标签效果，新增对应标签匹配分支即可

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