react native search filter

Reaccionar filtro de búsqueda nativo

Componente de búsqueda React Native con función de filtro.

Empezando

Instalación

Usando npm :

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

Usando yarn :

$ yarn add react-native-search-filter

Uso de ejemplo

Ejemplo completo disponible aquí.

 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 y configuración

Propiedad	Tipo	Por defecto	Descripción
caseSensitive	boolean	false	Defina si la búsqueda debe distinguir entre mayúsculas y minúsculas.
clearIcon	Node	null	Icono de borrar opcional.
clearIconViewStyles	Style	{position:absolute',top: 18,right: 22}	Estilos opcionales para la vista de iconos claros.
filterKeys	string o [string]		Será utilizado por el método de filtro si no se pasa ningún argumento allí.
fuzzy	boolean	false	Defina si la búsqueda debe ser difusa.
inputViewStyles	Style		Estilos opcionales para el contenedor de entrada.
onChangeText	Function	Requerido	Función llamada cuando se cambia el término de búsqueda (se pasará como argumento).
sortResults	boolean	false	Defina si los resultados de la búsqueda deben ordenarse por relevancia (solo funciona con búsqueda difusa).
throttle	number	200	Reduzca la frecuencia de llamadas a la función onChange (en ms).
onSubmitEditing	function	() => {}	Define una función para el botón de búsqueda del teclado al presionar.
inputFocus	boolean	false	Define si el campo recibe el foco.
returnKeyType	string	done	Determina cómo debe verse la clave de retorno. Los siguientes valores funcionan en todas las plataformas: done , go , next , search , send

Métodos

filter([keys])

Devuelve una función que se puede utilizar para filtrar una matriz. Las claves pueden ser string , [string] o null .

Si una matriz de claves es una matriz, la función devolverá verdadero si al menos una de las claves del elemento coincide con el término de búsqueda.

Métodos estáticos

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

Devuelve una función que se puede utilizar para filtrar una matriz. searchTerm puede ser una expresión regular o una cadena. Las claves pueden ser string , [string] o null .

Si una matriz de claves es una matriz, la función devolverá verdadero si al menos una de las claves del elemento coincide con el término de búsqueda.

Problemas conocidos

Oculte clearIcon si la entrada de búsqueda está vacía.

Siempre que tenga un paquete de íconos personalizado, un método de alternancia breve para la propiedad será suficiente: clearIcon={this.state.searchTerm!==''&&<Icon name="x"/>} .

Fuse.js: Complemento desconocido "babel-plugin-add-module-exports"

Agregue babel-plugin-add-module-exports como dependencia de desarrollo. Fusible.js #154.

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

Reconocimiento

enkidevs: componente simple de react.js para una entrada de búsqueda, que proporciona una función de filtro.