react native click highlighted word

给你一囗甜甜゛ 提交于 2019-12-25 03:39:27

问题


I'm using react-native-highlight-words to highlight hashtagged words in my react-native app. It highlights required words properly but I want to make it clickable too which is not provided by this library. Means when I will click #positivewibes word, it redirect me to another page. I've uploaded the image for reference here.

My Code

import Highlighter from 'react-native-highlight-words';

export default class LikeComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            highlightWordArray: []
        };
    }
    componentDidMount() {
        postText = this.props.postData.details;
        var regexp = new RegExp('#([^\\s]*)','g');
        postText = postText.match(regexp);
        if(postText != null) {
            this.setState({highlightWordArray: postText});
        }
    }
    render() {
       return (
         <Highlighter
           highlightStyle={{color: 'red'}}
           searchWords={this.state.highlightWordArray}
           textToHighlight= {this.props.postData.details}
         />
      )}
}

Any help is appreciated. Thank you.


回答1:


You can fork and modify the library code by providing an additional prop - onPress in the file as

<Text 
   onPress={props.onPress}
   key={index}
   style={chunk.highlight && highlightStyle}
>
  {text}
</Text>

and later use it as

<Highlighter
   ...// other props
   onPress={// your redirect instance}
/>


来源:https://stackoverflow.com/questions/54414770/react-native-click-highlighted-word

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!