javascript - Highlight the Search Text in FlatList - React Native

Question

I have a React Native App and i have a Search Bar and a FlatList. My search logic is as below

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:

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

render item:

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

Item Component:

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

I want a Search Filter Highlight like below where as soon as i start typing in the searchBar the text in the FlatList has to be highlighted.

How can i implement this?? React native highlight word? Any function? Please help

标签： javascriptreactjsreact-nativehighlightreact-native-flatlist

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>