react-native高亮词并使它可单击

时间:2019-01-31 13:01:42

标签: reactjs react-native react-native-ios react-native-flatlist

我正在开发一个本机应用程序,其中必须突出显示段落中的#tagged word并使其可单击。我使用了react-native-highlight-words库,除了click事件外,它都能正常工作。我还更改了Click事件的核心库,但是由于this链接中提供的解决方案,它使我的系统挂起并且无法正常工作。我也有一个#tagged单词数组出现在段落中,但是如何给我不知道的特定单词赋予样式。

我的代码

    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}
            onPress={(value) => console.warn(value)}
         />
   )}
}

有什么解决方法可以突出显示#taggeed中的this.props.postData.details单词并使其可点击?

谢谢。

1 个答案:

答案 0 :(得分:0)

实际上,当前react-native-highlight-words只是highlight-words-core的本机包装。它提供了可用于本机的组件。我检查了它的库,react-native-highlight-words中没有onPress个事件附加到Text组件上。

如果要执行onPress,则必须在核心库react-native-highlight-words中编写onpress函数。

onPress中创建两个新的Highlighter.js函数,

Highlighter.propTypes = {
    ...
    ...
    onPressNormalText: PropTypes.func,
    onPressHighlightedText: PropTypes.func
};

然后将其onPress功能添加为荧光笔

export default function Highlighter({..., ..., onPressNormalText, onPressHighlightedText}) {
   ...
   ...
   ...
}

最后将此功能添加到Text的{​​{1}}个组件上,

Highlighter.js

最后,您的return ( <Text style={style} {...props} onPress={onPressNormalText}> {chunks.map((chunk, index) => { const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start); return !chunk.highlight ? ( text ) : ( <Text onPress={onPressHighlightedText} key={index} style={chunk.highlight && highlightStyle}> {text} </Text> ); })} </Text> ); Highlighter.js事件看起来像

onPress

现在您可以将import React from "react"; import { Text, TouchableOpacity } from "react-native"; import { findAll } from "highlight-words-core"; import PropTypes from "prop-types"; Highlighter.propTypes = { autoEscape: PropTypes.bool, highlightStyle: Text.propTypes.style, searchWords: PropTypes.arrayOf(PropTypes.string).isRequired, textToHighlight: PropTypes.string.isRequired, sanitize: PropTypes.func, style: Text.propTypes.style, onPressNormalText: PropTypes.func, onPressHighlightedText: PropTypes.func }; /** * Highlights all occurrences of search terms (searchText) within a string (textToHighlight). * This function returns an array of strings and <Text> elements (wrapping highlighted words). */ export default function Highlighter({ autoEscape, highlightStyle, searchWords, textToHighlight, sanitize, onPressNormalText, onPressHighlightedText, style, ...props }) { const chunks = findAll({ textToHighlight, searchWords, sanitize, autoEscape }); return ( <Text style={style} {...props} onPress={onPressNormalText}> {chunks.map((chunk, index) => { const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start); return !chunk.highlight ? ( text ) : ( <Text onPress={onPressHighlightedText} key={index} style={chunk.highlight && highlightStyle}> {text} </Text> ); })} </Text> ); } 用作

Highlighter.js

一切都完成了:)

或者,如果您不想执行所有这些操作,只需使用该库的分叉版本https://github.com/adityasonel/rn-highlight-words