У меня есть собственное приложение React с TextInput и Flatlist. Найдите что-нибудь с помощью фильтров TextInput и плоского списка и отобразите результат поиска. Тексты поиска выделены. Теперь, когда я ищу «сигнал», как показано ниже, мы видим, что «...» подсвечивается, показывая пользователю, что выделенный текст находится внутри длинного сообщения.
Теперь, когда я набираю «запрос», почему он не делает то же самое ???
код выделения:
getHighlightedText = text => {
const {value} = this.props;
if(value == "" || value == null || value == 0){
return <Text> {text} </Text>
}
else{
const words = value.split(/\s+/g).filter(word => word.length);
const pattern = words.join('|');
const tex = escape(pattern);
const re = new RegExp(tex, 'gi')
const children = [];
let before, highlighted, match, pos = 0;
const matches = text.match(re);
if(matches != null){
for( match of matches ){
match = re.exec(text)
if(pos < match.index) {
before = text.substring(pos, match.index);
if(before.length){
children.push(before)
}
}
highlighted = <Text style={{ backgroundColor: 'coral'}} key={match.index + match[0].length}>{match[0]}</Text>
children.push(highlighted);
pos = match.index + match[0].length;
}
}
if(pos < text.length){
const last = text.substring(pos);
children.push(last);
}
return <Text>{children}</Text>
}
}
render(){
return
<Text> getHighlightedText(text) </Text>
}
Что я делаю не так ?? Как я могу это исправить?? Пожалуйста, помогите продержаться несколько дней !!!
Обновление: случай, когда поисковый текст не отображается на экране.
