Реагировать на родные слова и сделать его кликабельным

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

Есть ли решение, чтобы выделить #taggeed слово в this.props.postData.details и сделать это кликабельным?

Спасибо.

Answer 1

На самом деле в настоящее время react-native-highlight-words это просто реактивная оболочка highlight-words-core, Это дает компонент для использования в реагировать родной. Я проверил свою библиотеку и нет onPress событие прикреплено к Text компоненты в реакциях-родной-основные слова.

Если вы хотите выполнить onPress Затем вы должны написать функции печати в основной библиотеке, которая react-native-highlight-words,

Создать два новых onPress функция в Highlighter.js как,

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

Затем добавьте эти функции onPress в Highlighter как,

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

Наконец добавьте эту функцию на Text компоненты 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 как,

<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

Основываясь на ответе Адитьи, мы можем отправить выделенный текст, как показано ниже, и выполнить необходимые функции.

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