React Native渲染含HTML标签字符串时显示[object Object]求助

你遇到的问题是因为字符串的replace方法只能返回字符串类型。当你在replace的回调里返回<Text>组件时，这个React元素会被自动调用toString()方法，转成字符串"[object Object]"，所以最终的formattedText是普通字符串和这类对象字符串的混合，渲染时就会显示[object Object]。

要正确渲染混合文本和样式的内容，需要把原始字符串拆分成普通文本片段+React元素的数组，再传递给外层<Text>组件（React Native支持在<Text>中直接渲染数组内容）。

以下是修正后的formating函数：

formating(text) {
  // 定义HTML标签与React样式/组件的映射规则
  const tagRules = [
    { regex: /<b>(.*?)<\/b>/g, style: { fontWeight: 'bold' } },
    { regex: /<i>(.*?)<\/i>/g, style: { fontStyle: 'italic' } },
    { regex: /<u>(.*?)<\/u>/g, style: { textDecorationLine: 'underline' } },
    { regex: /<br\s?\/?>/g, component: <Text>\n</Text> }
  ];

  let parts = [text];

  // 逐个处理每个标签规则，拆分文本为普通字符串和React元素
  tagRules.forEach(rule => {
    const newParts = [];
    parts.forEach(part => {
      if (typeof part === 'string') {
        let match;
        let lastIndex = 0;
        // 循环匹配当前字符串中的所有目标标签
        while ((match = rule.regex.exec(part)) !== null) {
          // 加入匹配标签前的普通文本
          if (match.index > lastIndex) {
            newParts.push(part.slice(lastIndex, match.index));
          }
          // 根据规则生成对应的React元素
          if (rule.style) {
            newParts.push(<Text style={rule.style}>{match[1]}</Text>);
          } else if (rule.component) {
            newParts.push(rule.component);
          }
          lastIndex = match.index + match[0].length;
        }
        // 加入剩余的未匹配文本
        if (lastIndex < part.length) {
          newParts.push(part.slice(lastIndex));
        }
      } else {
        // 如果是已经处理好的React元素，直接保留
        newParts.push(part);
      }
    });
    parts = newParts;
  });

  // 返回包裹在Text组件中的内容数组
  return <Text>{parts}</Text>;
}

1. 规则定义：把每个HTML标签和对应的React样式/组件做映射，方便统一处理
2. 拆分逻辑：遍历每个标签规则，将字符串拆分成普通文本和对应样式的<Text>组件，已经是React元素的部分直接保留
3. 数组渲染：React Native的<Text>组件支持直接渲染数组（数组元素可以是字符串或子<Text>组件），这样就能正确渲染出带格式的文本

调用这个修正后的函数，输入"Hello,click <u>here</u>"时，会生成包含普通文本和带下划线子组件的数组，最终渲染出预期的格式化效果。

内容的提问来源于stack exchange，提问作者Vénon