反应原生突出显示词并使其可点击

Question

我正在开发一个反应原生应用程序，我必须在段落中突出显示#tagged word并使该词可点击。我使用了react-native-highlight-words库，除了点击事件外，它工作正常。我还更改了点击事件的核心库，但它挂起了我的系统并且无法完美运行，因为此链接中给出了解决方案。我还得到了一系列#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)}
         />
   )}
}

是否有任何解决方案可以在this.props.postData.details中突出显示#taggeed单词并使其可点击？

谢谢。

Answer 1

实际上目前

react-native-highlight-words只是highlight-words-core的反应原生包装器。它提供了一个在反应原生中使用的组件。我检查了它的库，没有onPress事件附加到 react-native-highlight-words 中的Text组件。

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

在Highlighter.js中创建两个新的onPress函数，如下所示：

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

然后在荧光笔中添加此 onPress 函数作为，

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

最后在Highlighter.js的Text组件上添加这个函数，

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用作，

<Highlighter
     highlightStyle={{ backgroundColor: "yellow" }}
     searchWords={["and", "or", "the"]}
     textToHighlight="The dog is chasing the cat. Or perhaps they re just playing?"
     onPressNormalText={() => console.log("normal text is clickeddd!")}
     onPressHighlightedText={() => console.log("highlighted text is clickked!")     
/>

一切都:)

或者，如果您不想做所有这些，只需使用此库的分支版本，https://github.com/adityasonel/rn-highlight-words

Answer 2

基于Aditya的回答，我们可以发送如下所示的突出显示文本并执行必要的功能。

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(text)} key={index} style={chunk.highlight && highlightStyle}>
                    {text}
                </Text>
            );
        })}
    </Text>
)