我正在开发一个本机应用程序,其中必须突出显示段落中的#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
单词并使其可点击?
谢谢。
答案 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