如何在 React Native 中检测段落中特定单词的样式、超链接

Question

我正在做 React Native 项目。我是 React Native 的新手。我从服务器响应中得到一些问题和答案。 我得到了问答键。但是，在回答键中，我得到了包含不同字体样式、电子邮件/网址链接等的格式键。

我必须检查答案是否包含格式中的文本，并且我必须应用这些样式或取消划线并点击电子邮件/网址。

在这里，我的问题是如何映射这些匹配的单词以及如何从该文本中启用电子邮件 I'd/website url。

以下是示例数据

text：要在答案文本中搜索的文本 instance：在文本中找到多个实例时要匹配的实例（如果提供零，则匹配所有实例） 链接：这可以是用于匹配文本的 url 或 mailto 样式：要应用于匹配文本的样式集合

  {
    "question": "How do I change my pwd?",
    "answer": "To change your pwd, go to the Settings section from the main menu and choose the Change Password option. The new password will be your new  password, as well. Still having difficulty logging in? Please contact the Services Team would be great.",

   

 "format": [
      {
        "text": "Settings",
        "instance": 1,
        "link": "",
        "styles": {
          "fontWeight": "bold"
        }
      },

      {
        "text": "Change Password",
        "instance": 1,
        "link": "",
        "styles": {
          "fontWeight": "bold"
        }
      },

      {
        "text": "Services Team",
        "instance": 1,
        "link": "mailto:client@gmail.com",
        "styles": {
          "fontStyle": "underline",
          "color": "blue"
        }
      }

    ]

  }

我必须在我的文本中显示这个

有什么建议吗？ 下面的屏幕截图同样我必须显示，就像例子一样

Answer 1

我相信我可以想到这种方法，但尚未对其进行测试，但这将是一个好的开始，假设格式按顺序排列，您可以尝试这样的方法：

  formatedContent = (format, label, defaultStyles) => {
    let managebleLabel = label;
    const textsToRender = format && format.length > 0 ? format.map((item, index) => {
      const { link, text } = item;
      const styles =
        item.styles && typeof item.styles === 'object'
          ? item.styles
          : defaultStyles;
      // console.log('item', item);
      const indexOfText = managebleLabel.indexOf(text);
      const workingLabel = managebleLabel.substring(
        0,
        indexOfText + text.length
      );
      managebleLabel = managebleLabel.split(text)[1];
      const splittedLabel = workingLabel.split(text);
      const simpleLabel = (
        <Text style={defaultStyles} ellipsizeMode="tail">
          {splittedLabel[0]}
        </Text>
      );
      const formatedLabel =
        link && link.length > 0 ? (
          this.isLink(text, link, styles)
        ) : (
          <Text style={styles}>{text}</Text>
        ); // Assign the format to label
      return (
        <View key={'answer-' + index} style={{ flex: 1, flexDirection: 'row', flexWrap: "wrap" }}>
          {simpleLabel}
          {formatedLabel}
        </View>
      ); // Join the labels
    }) : <Text style={defaultStyles}>{label}</Text>;
    return textsToRender;
  };

isLink = (label, link, style) => {
  return 
   (
    <TouchableOpacity 
      onPress={() => Linking.openURL(link)} 
        >
        <Text style={style}>{label}</Text>
    </TouchableOpacity>
    );
}

基本上在你的渲染中你会做这样的事情

render() {
   return (
    <View>
     {this.formatedContent(yourFormats, yourText, defaultStyles)}
    </View>
  );
}