How to detect styles, hyperlinks for particular words from a paragraph in 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.

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.

Below is example data

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:client@gmail.com",
        "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

回答1:

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

来源：https://stackoverflow.com/questions/57998696/how-to-detect-styles-hyperlinks-for-particular-words-from-a-paragraph-in-react

标签

javascript

react-native

styles