react native search filter

Filtre de recherche natif React

Composant de recherche React Native avec fonction de filtre.

Commencer

Installation

Utilisation de npm :

$ npm install react-native-search-filter --save

Utilisation yarn :

$ yarn add react-native-search-filter

Exemple d'utilisation

Exemple complet disponible ici.

 import React , { Component } from 'react' ;
import { StyleSheet , Text , View , ScrollView , TouchableOpacity } from 'react-native' ;
import SearchInput , { createFilter } from 'react-native-search-filter' ;
import emails from './emails' ;
const KEYS_TO_FILTERS = [ 'user.name' , 'subject' ] ;

export default class App extends Component < { } > {
 constructor ( props ) {
    super ( props ) ;
    this . state = {
      searchTerm : ''
    }
  }
  searchUpdated ( term ) {
    this . setState ( { searchTerm : term } )
  }
  render ( ) {
    const filteredEmails = emails . filter ( createFilter ( this . state . searchTerm , KEYS_TO_FILTERS ) )
    return (
      < View style = { styles . container } >
        < SearchInput 
          onChangeText = { ( term ) => { this . searchUpdated ( term ) } } 
          style = { styles . searchInput }
          placeholder = "Type a message to search"
          / >
        < ScrollView >
          { filteredEmails . map ( email => {
            return (
              < TouchableOpacity onPress = { ( ) => alert ( email . user . name ) } key = { email . id } style = { styles . emailItem } >
                < View >
                  < Text > { email . user . name } < / Text >
                  < Text style = { styles . emailSubject } > { email . subject } < / Text >
                < / View >
              < / TouchableOpacity >
            )
          } ) }
        < / ScrollView >
      < / View >
    ) ;
  }
}

const styles = StyleSheet . create ( {
  container : {
    flex : 1 ,
    backgroundColor : '#fff' ,
    justifyContent : 'flex-start'
  } ,
  emailItem : {
    borderBottomWidth : 0.5 ,
    borderColor : 'rgba(0,0,0,0.3)' ,
    padding : 10
  } ,
  emailSubject : {
    color : 'rgba(0,0,0,0.5)'
  } ,
  searchInput : {
    padding : 10 ,
    borderColor : '#CCC' ,
    borderWidth : 1
  }
} ) ; 

API et configuration

Propriété	Taper	Défaut	Description
caseSensitive	boolean	false	Définissez si la recherche doit être sensible à la casse.
clearIcon	Node	null	Icône claire facultative.
clearIconViewStyles	Style	{position:absolute',top: 18,right: 22}	Styles facultatifs pour l’affichage des icônes claires.
filterKeys	string ou [string]		Sera utilisé par la méthode filter si aucun argument n'y est passé.
fuzzy	boolean	false	Définissez si la recherche doit être floue.
inputViewStyles	Style		Styles facultatifs pour le conteneur d’entrée.
onChangeText	Function	Requis	Fonction appelée lorsque le terme de recherche est modifié (sera passé en argument).
sortResults	boolean	false	Définissez si les résultats de la recherche doivent être triés par pertinence (fonctionne uniquement avec la recherche floue).
throttle	number	200	Réduisez la fréquence d'appel à la fonction onChange (en ms).
onSubmitEditing	function	() => {}	Définit une fonction pour le bouton de recherche du clavier onPress.
inputFocus	boolean	false	Définit si le champ reçoit le focus.
returnKeyType	string	done	Détermine à quoi doit ressembler la clé de retour. Les valeurs suivantes fonctionnent sur toutes les plateformes : done , go , next , search , send

Méthodes

filter([keys])

Renvoie une fonction qui peut être utilisée pour filtrer un tableau. les clés peuvent être string , [string] ou null .

Si un tableau de clés est un tableau, la fonction retournera vrai si au moins une des clés de l'élément correspond au terme recherché.

Méthodes statiques

 filter ( searchTerm , [ keys ] , [ { caseSensitive , fuzzy , sortResults } ] )

Renvoie une fonction qui peut être utilisée pour filtrer un tableau. searchTerm peut être une expression régulière ou une chaîne. les clés peuvent être string , [string] ou null .

Si un tableau de clés est un tableau, la fonction retournera vrai si au moins une des clés de l'élément correspond au terme recherché.

Problèmes connus

Masquer clearIcon si l’entrée de recherche est vide.

À condition que vous disposiez d'un package d'icônes personnalisé, une courte méthode de basculement pour la propriété fera l'affaire : clearIcon={this.state.searchTerm!==''&&<Icon name="x"/>} .

Fuse.js : plugin inconnu "babel-plugin-add-module-exports"

Ajoutez babel-plugin-add-module-exports comme dépendance de développement. Fuse.js #154.

npm i babel-plugin-add-module-exports babel-preset-es2015 babel-preset-stage-2 --save-dev

Reconnaissance

enkidevs - Composant simple React.js pour une entrée de recherche, fournissant une fonction de filtre.