Выделите текст поиска в FlatList - React Native - PullRequest
Новая
       65

Выделите текст поиска в FlatList - React Native

0 голосов
/ 28 апреля 2020

У меня есть приложение React Native, а также панель поиска и FlatList. Мой логин поиска c выглядит следующим образом 

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 должен быть выделен.

enter image description here

Как я могу это реализовать ?? Реагировать на родные слова? Любая функция? Пожалуйста, помогите

1 Ответ

0 голосов
/ 28 апреля 2020

это похоже на 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>
...