在FlatList中高亮显示搜索文本--React Native。

Question

我有一个React Native App，我有一个搜索栏和一个FlatList.我的搜索逻辑是这样的。

handleSearch(text) {
  const newData = _.filter(this.state.temp, (item) => {
    const itemData = item.Desc ? item.Desc.toUpperCase() : ''.toUpperCase();
    const textParts = text.toUpperCase().split(' ');
    let idx = itemData.indexOf(textParts);
    let shouldInclude = true;
    for (let i = 0; i < textParts.length; i++) {
      const part = textParts[i];
      shouldInclude = shouldInclude && (itemData.indexOf(part) > -1);

      if (!shouldInclude) {
        return false;
      }
    }
    return true;
  });

  this.setState({
    notifications: newData,
    value: text
  });
}

搜索栏。

<SearchBar      
  lightTheme    
  value= {value}
  inputStyle={{margin: 0}}
  placeholder="Search here...."            
  onChangeText={(text)=>{this.handleSearch(text,false)}}     
  onTouchStart={()=>{this.renderDropdown(true)}}   
/>

FlatList:

render() {
  return
    <FlatList
      keyExtractor={(item, id) => item.id}
      data={notifications}
      renderItem={this.renderItem.bind(this)}
    />
}

呈现项目。

renderItem({item}) {
    return <Item item={item} 
    onPress = {()=> {this.goToDetails()}
    />
  }

项目组件。

export default class Item extends Component {
  handlePress() {
    return this.props.onPress();
  }

  render() {
      const {
        row,
        textContainer,
        id,
        ordername,
        desc,
        seperator
      } = styles;
      const {
        item
      } = this.props;
      const {
        Id,
        OrderName,
        Desc
      } = item;

      return (
          <View>
            <TouchableOpacity onPress = {
              () => {this.handlePress()>
                <View style = {seperator}>
                </View>
                <View style = {row}>
                  <View style = {textContainer}>
                    <Text style = {id}>{Id}</Text>
                    <Text style = {ordername}>{OrderName}</Text>
                    <Text style = {desc}>{Desc}</Text>
                  </View>
                  <View style = {seperator}>
                  </View>
                </View>
            </TouchableOpacity>
          </View>
      )
  }
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginLeft: 15,
    marginRight: 15,
    backgroundColor: 'white',
    paddingTop: 5,
    paddingBottom: 10
  },
  textContainer: {
    flex: 3,
    paddingLeft: 5,
    fontWeight: 'bold',
    fontSize: 8
  },
  id: {
    flex: 1,
    fontSize: 14,
    color: 'black',
    fontSize: 15
  },
  ordername: {
    flex: 1,
    fontSize: 14,
    color: 'blue',
    fontSize: 15
  },
  desc: {
    flex: 1,
    fontSize: 14,
    color: 'blue',
    fontSize: 15
  },
  seperator: {
    padding: 20
  }
})

我想要一个像下面这样的搜索过滤高亮，只要我开始在搜索栏中输入文字，FlatList中的文字就会被高亮。

我如何实现这个功能？React原生的高亮字？任何函数？请帮助我

Answer 1

它看起来像 SearcBar 值存储为 this.state.value递给 Item 并使用 regex 来分割你的文字（用于 Desc 作为参考，根据自己的情况使用...)

---

    renderItem({item}) {
      return <Item 
        item={item} 
        onPress = {()=> {this.goToDetails()}
        value={this.state.value}
       />
     }  




//Item.js

     getHighlightedText = text => {
       const { value } = this.props
       const parts = text.split(new RegExp(`(${value})`, 'gi'));
       return <Text style={desc}>
                {parts.map(part => part.toLowerCase() === value.toLowerCase()
                             ? <View style={{backgroundColor: 'red'}}>{part}</View> 
                             : part)}
             </Text>;
        }

       <View> {this.getHighlightedText(Desc)} </View>