如何在 React Native 中检测段落中特定单词的样式、超链接 [英] How to detect styles, hyperlinks for particular words from a paragraph in React Native

问题描述

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

I'm doing React Native project. I am new to React Native. I am getting some questions and answers from server response. I'm getting question and answer keys. But, In answer key I'm getting Format key which contains different font styles, email/url links etc.

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

I have to check that answer has contains Text from Format and I have to apply those styles or undeline with on tap for email/url.

在这里，我的问题是如何映射这些匹配的词，以及如何启用该文本​​中的电子邮件我/网站 url.

Here, my question is how to map these matching words and how to enable on tap for e-mail I'd/website urlfrom that text.

以下是示例数据

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

text: the text to search for in the answer's text instance: the instance to match in case of multiple instances found within the text (if zero is provided, match all instances) link: this can be a url or a mailto to use for the matched text styles: a collection of styles to be applied to the matching text

  {
    "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:[e-mail]",
        "styles": {
          "fontStyle": "underline",
          "color": "blue"
        }
      }

    ]

  }

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

I have to display this in my Text

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

Any suggestions? Below screen shot likewise I have to show, Just like example

推荐答案

我相信是可行的 我能想到这种方法，还没有测试过，但这将是一个好的开始，假设格式按顺序排列，你可以尝试这样的事情:

i believe is posible i can think of this approach, haven't tested it yet but it will be a good start, assuming the formats came in order you can try something like this:

  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>
    );
}

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

Basically in your render you will do something like this

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

这篇关于如何在 React Native 中检测段落中特定单词的样式、超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！