React Native如何将含Text组件的JSON字符串渲染为内联文本？

方案一：解析现有格式的字符串 #

你的JSON字符串里包含转义后的JSX标签，直接渲染会显示纯文本，得把这些标签解析成真正的React组件。可以用正则拆分内容，再动态生成元素：

1. 编写正则匹配转义后的Text标签，提取属性和文本内容：

const textRegex = /<Text(.*?)>(.*?)<\/Text>/g;

2. 实现一个解析函数，把原字符串拆分成普通文本和可交互的Text组件：

import { Text } from 'react-native';

const parseFaqText = (rawText, openUrl) => {
  const parts = [];
  let lastIndex = 0;
  let match;

  while ((match = textRegex.exec(rawText)) !== null) {
    // 添加匹配到的标签之前的普通文本
    if (match.index > lastIndex) {
      parts.push(rawText.slice(lastIndex, match.index));
    }

    // 解析Text的属性（针对你的场景提取链接和样式）
    const urlMatch = match[1].match(/openUrl\('(.*?)'\)/);
    const url = urlMatch ? urlMatch[1] : '';
    const colorMatch = match[1].match(/color:'(.*?)'/);
    const color = colorMatch ? colorMatch[1] : '#F37F06';

    // 添加可交互的Text组件
    parts.push(
      <Text
        key={parts.length}
        onPress={() => openUrl(url)}
        style={{ color }}
      >
        {match[2]}
      </Text>
    );

    lastIndex = match.index + match[0].length;
  }

  // 添加剩余的普通文本
  if (lastIndex < rawText.length) {
    parts.push(rawText.slice(lastIndex));
  }

  return parts;
};

3. 在FlatList中使用这个函数：

<FlatList
  data={faqData}
  renderItem={({ item }) => (
    <Text>{parseFaqText(item.content, (url) => root.mapStore.openUrl(url))}</Text>
  )}
  keyExtractor={(item) => item.id}
/>

注意：这种正则解析仅适配你当前的标签格式，若JSON结构变动需调整正则；确保root.mapStore.openUrl在当前组件可访问，或把它作为参数传入解析函数。

方案二：修改JSON结构（更推荐） #

如果能调整JSON的存储格式，改成结构化数组会更安全、易维护，避免正则解析的麻烦：

修改后的JSON示例：

{
  "id": 1,
  "content": [
    "Estan quebrantando las ",
    {
      "type": "link",
      "text": "Reglas de la comunidad",
      "url": "https://page.com/privacy-policy",
      "style": { "color": "#F37F06" }
    },
    " o ",
    {
      "type": "link",
      "text": "Términos y condiciones",
      "url": "https://page.com/privacy-policy",
      "style": { "color": "#F37F06" }
    }
  ]
}

渲染时直接遍历数组：

<FlatList
  data={faqData}
  renderItem={({ item }) => (
    <Text>
      {item.content.map((part, index) => {
        if (typeof part === 'string') {
          return <Text key={index}>{part}</Text>;
        }
        return (
          <Text
            key={index}
            onPress={() => root.mapStore.openUrl(part.url)}
            style={part.style}
          >
            {part.text}
          </Text>
        );
      })}
    </Text>
  )}
  keyExtractor={(item) => item.id}
/>

这种方式无需解析字符串，逻辑清晰，还能灵活扩展其他类型的内容模块。

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