2
votes

Comment mettre en évidence les résultats de recherche dans React-Native FlatList?

Je suis novice en React-native. J'ai besoin de mettre en évidence les résultats de la recherche dans ma FlatList pendant que je tape dans la barre de recherche. Il existe deux composants: react-native-highlight-words et react-native-text-highlight , mais je ne sais pas comment faire utilisez-les! voici mon code:

import React, { Component } from 'react';
import {StyleSheet, Text, View, FlatList, TouchableOpacity } from 'react-native';
import { List, ListItem, SearchBar } from 'react-native-elements';
import DropdownMenu from 'react-native-dropdown-menu';
import {Header, Left, Right, Icon} from 'native-base'

var SQLite = require('react-native-sqlite-storage')
var db = SQLite.openDatabase({name: 'test.sqlite', createFromLocation: '~dictionary.sqlite'})
var data = [["English", "Arabic", "Persian"]];

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {record: [], arrayholder : [], query:''};
    db.transaction((tx) => {
      tx.executeSql('SELECT * FROM tblWord', [], (tx, results) => {
          let row = results.rows.item();
          arrayholder = results.rows.raw()
          record = results.rows.raw()
          this.setState({arrayholder: arrayholder})
          this.setState({ record: record })
          }});});  
      }

  searchFilterFunction = text => {
    var newData = this.state.arrayholder;
    newData = this.state.arrayholder.filter(item => {
      const itemData = item.word_english.toLowerCase()
      const textData = text.toLowerCase()
      return itemData.indexOf(textData) > -1 });
    this.setState({query: text,record: newData });
  };


  render() {
    return (
      <View style = {styles.container}>
        <Header style={styles.headerStyle}>
            ...
        </Header>
        <View style={styles.menuView}>
          <DropdownMenu
            bgColor={"#B38687"}
            activityTintColor={'green'}
            titleStyle={{color: '#333333'}} 
            handler={(selection, row) => this.setState({text4: data[selection][row]})}
            data={data}
            >
          </DropdownMenu>
        </View >
        <View >
          <View style={styles.searchBarView}>
            <SearchBar
              placeholder="Search"
              lightTheme
              value = {this.state.query}
              onChangeText={text => this.searchFilterFunction(text)}
              autoCorrect={false}
              inputStyle={{backgroundColor: 'white'}}
              containerStyle={{backgroundColor: 'white', borderWidth: 1, borderColor:'#B38687', }}
              />
          </View>

          <View style={styles.flatListVew}>
            <List containerStyle={{ flexDirection: 'column-reverse', borderTopWidth: 0, borderBottomWidth: 0 }} >
              <FlatList 
                data={this.state.record} 
                keyExtractor={((item, index) => "itemNo-" + index)}
                renderItem={({item}) => (
                  <ListItem
                    roundAvatar
                    onPress={() => {this.props.navigation.navigate('Screen2', {data: (item.word_english +'\n' + item.word_arabic)} ); }}
                    title={item.word_english}
                    containerStyle={{ borderBottomWidth: 0 }}
                  /> )}
                />
              </List>
            </View>
          </View>
       </View>);}
          }

const styles = StyleSheet.create({
 ...

Je veux que les résultats ressemblent à ceci:

Toute aide serait grandement appréciée.

react-native react-native-flatlist searchbar

2 commentaires

@ simaAttar- partage le code du composant ListItem .

@Rocky J'ai édité ma question et inclus tout mon code.

3 Réponses :

0
votes

Vous pouvez mettre en évidence en utilisant vos propres styles.

Voici un exemple simple:

const myList = [{ text: 'Hi', id: 1 }, ... ]

class List extends Component {
  this.state = { highlightedId: undefined }

  render() {
    return (
        <FlatList
        data={myList}
        renderItem={({item}) => <Text style={item.id === this.state.highlightedId ? styles.hightlighted : undefined}>{item.text}</Text>}
      />
    )
  }
}

const styles = StyleSheet.create({
  highlighted: {
    backgroundColor: "yellow"
  }
})

Dans votre cas, vous pouvez ajuster le containerStyle du .

4 commentaires

hmmm..merci @J. Hesters. Laisse-moi voir ce que je peux faire: |

@simaAttar Faites-moi savoir si vous ne pouvez pas le faire et je peux vous aider davantage.

En fait, je ne comprends pas comment implémenter votre code sur le mien, pour info c'est une application de dictionnaire qui va rechercher des mots dans la flatList, donc si vous pensez toujours que votre code est approprié, veuillez en expliquer davantage. Merci alooot

Je ne vois pas assez de code pour cela. Le code est également formaté de manière à le rendre difficile à lire.

4
votes

Vous pouvez transmettre du texte ou une vue personnalisée à ListItem comme accessoires pour title . J'utilise React Native Highlight Words pour mettre en évidence le texte comme vous l'avez indiqué.

ajoutez React Native Highlight Words en ajoutant la ligne ci-dessous:

<ListItem
    roundAvatar
    onPress={() => {this.props.navigation.navigate('Screen2', {data: (item.word_english +'\n' + item.word_arabic)} ); }}
    title={
      <Highlighter
          highlightStyle={{backgroundColor: 'yellow'}}
          searchWords={[this.state.query]}
          textToHighlight={item.word_english}
      />}
    containerStyle={{ borderBottomWidth: 0 }}
/>

Mettre à jour le code pour le composant ListItem pour le composant souhaité résultat:

import Highlighter from 'react-native-highlight-words';

0 commentaires

0
votes

 handleChangeText = param => {
const {categoryList} = this.state;
const regEx = "\\s*(" + param + ")\\s*"
const validator = new RegExp(regEx, 'i');
let filterData = [];
//here is categorylist is the data supplied to flatlist.
categoryList.forEach(item => {
  let flag = validator.test(item.teamtype);
  if (flag) {
    //here set the highlighting color
  }
})
};Call the above function onChangeText() of your search field.

0 commentaires