react native search filter

Reagieren Sie auf den nativen Suchfilter

React Native Suchkomponente mit Filterfunktion.

Erste Schritte

Installation

Mit npm :

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

Verwendung von yarn :

$ yarn add react-native-search-filter

Beispielverwendung

Vollständiges Beispiel finden Sie hier.

 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 und Konfiguration

Eigentum	Typ	Standard	Beschreibung
caseSensitive	boolean	false	Legen Sie fest, ob bei der Suche die Groß-/Kleinschreibung beachtet werden soll.
clearIcon	Node	null	Optionales klares Symbol.
clearIconViewStyles	Style	{position:absolute',top: 18,right: 22}	Optionale Stile für die übersichtliche Symbolansicht.
filterKeys	string oder [string]		Wird von der Filtermethode verwendet, wenn dort kein Argument übergeben wird.
fuzzy	boolean	false	Legen Sie fest, ob die Suche unscharf sein soll.
inputViewStyles	Style		Optionale Stile für den Eingabecontainer.
onChangeText	Function	Erforderlich	Funktion, die bei Änderung des Suchbegriffs aufgerufen wird (wird als Argument übergeben).
sortResults	boolean	false	Legen Sie fest, ob Suchergebnisse nach Relevanz sortiert werden sollen (funktioniert nur mit Fuzzy-Suche).
throttle	number	200	Reduzieren Sie die Aufrufhäufigkeit der onChange-Funktion (in ms).
onSubmitEditing	function	() => {}	Definiert eine Funktion für die Tastatursuchschaltfläche onPress.
inputFocus	boolean	false	Definiert, ob das Feld den Fokus erhält.
returnKeyType	string	done	Legt fest, wie die Return-Taste aussehen soll. Die folgenden Werte funktionieren plattformübergreifend: done , go , next , search , send

Methoden

filter([keys])

Gibt eine Funktion zurück, die zum Filtern eines Arrays verwendet werden kann. Schlüssel können string , [string] oder null sein.

Wenn es sich bei einem Array-Schlüssel um ein Array handelt, gibt die Funktion „true“ zurück, wenn mindestens einer der Schlüssel des Elements mit dem Suchbegriff übereinstimmt.

Statische Methoden

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

Gibt eine Funktion zurück, die zum Filtern eines Arrays verwendet werden kann. searchTerm kann ein regulärer Ausdruck oder ein String sein. Schlüssel können string , [string] oder null sein.

Wenn es sich bei einem Array-Schlüssel um ein Array handelt, gibt die Funktion „true“ zurück, wenn mindestens einer der Schlüssel des Elements mit dem Suchbegriff übereinstimmt.

Bekannte Probleme

clearIcon ausblenden, wenn die Sucheingabe leer ist.

Vorausgesetzt, Sie haben ein benutzerdefiniertes Symbolpaket, reicht eine kurze Umschaltmethode für die Eigenschaft aus: clearIcon={this.state.searchTerm!==''&&<Icon name="x"/>} .

Fuse.js: Unbekanntes Plugin „babel-plugin-add-module-exports“

Fügen Sie babel-plugin-add-module-exports als Entwicklungsabhängigkeit hinzu. Fuse.js #154.

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

Anerkennung

enkidevs – Einfache React.js-Komponente für eine Sucheingabe, die eine Filterfunktion bereitstellt.