react-native 突出显示单词并使其可点击答案

【问题标题】：react-native highlight word and make it clickablereact-native 突出显示单词并使其可点击
【发布时间】：2019-01-31 13:01:41
【问题描述】：

我正在开发一个 react-native 应用程序，我必须在其中突出显示段落中的 #tagged word 并使该词可点击。我使用了react-native-highlight-words 库，它工作正常，除了点击事件。我还为点击事件更改了它的核心库，但它挂起我的系统并且不能完美地工作，因为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)}
         />
   )}
}

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

谢谢。

【问题讨论】：

好的，对于只是点击事件，您更改了核心库吗？
是的，但还有其他选择吗？

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

【解决方案1】：

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

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

在Highlighter.js中新建两个onPress函数，

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

然后在 Highlighter 中添加这个 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

【讨论】：