реагировать на родные слова и сделать его кликабельным - PullRequest
Новая
       50

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

0 голосов
/ 31 января 2019

Я занимаюсь разработкой собственного приложения, в котором я должен выделить #tagged word в абзаце и сделать это слово кликабельным.Я использовал библиотеку react-native-highlight-words, и она отлично работает, кроме события click.Я также изменил библиотеку ядра для события щелчка, но он зависает в моей системе и не работает идеально, поскольку решение дано в этой ссылке.У меня также есть массив #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 голосов
/ 01 февраля 2019

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

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

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

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

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

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 as, 

<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

...