react native search filter

Filtro de pesquisa nativa React

Componente de pesquisa React Native com função de filtro.

Começando

Instalação

Usando npm :

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

Usando yarn :

$ yarn add react-native-search-filter

Exemplo de uso

Exemplo completo disponível aqui.

 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 e configuração

Propriedade	Tipo	Padrão	Descrição
caseSensitive	boolean	false	Defina se a pesquisa deve diferenciar maiúsculas de minúsculas.
clearIcon	Node	null	Ícone claro opcional.
clearIconViewStyles	Style	{position:absolute',top: 18,right: 22}	Estilos opcionais para visualização de ícones claros.
filterKeys	string ou [string]		Será usado pelo método filter se nenhum argumento for passado lá.
fuzzy	boolean	false	Defina se a pesquisa deve ser difusa.
inputViewStyles	Style		Estilos opcionais para o contêiner de entrada.
onChangeText	Function	Obrigatório	Função chamada quando o termo de pesquisa é alterado (será passado como argumento).
sortResults	boolean	false	Defina se os resultados da pesquisa devem ser ordenados por relevância (funciona apenas com pesquisa difusa).
throttle	number	200	Reduza a frequência de chamadas para a função onChange (em ms).
onSubmitEditing	function	() => {}	Define uma função para o botão de pesquisa do teclado onPress.
inputFocus	boolean	false	Define se o campo recebe foco.
returnKeyType	string	done	Determina a aparência da chave de retorno. Os seguintes valores funcionam em várias plataformas: done , go , next , search , send

Métodos

filter([keys])

Retorna uma função que pode ser usada para filtrar um array. as chaves podem ser string , [string] ou null .

Se um array keys for um array, a função retornará verdadeiro se pelo menos uma das chaves do item corresponder ao termo de pesquisa.

Métodos estáticos

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

Retorna uma função que pode ser usada para filtrar um array. searchTerm pode ser um regex ou uma String. as chaves podem ser string , [string] ou null .

Se um array keys for um array, a função retornará verdadeiro se pelo menos uma das chaves do item corresponder ao termo de pesquisa.

Problemas conhecidos

Oculte clearIcon se a entrada de pesquisa estiver vazia.

Desde que você tenha um pacote de ícones personalizado, um método de alternância curto para a propriedade servirá: clearIcon={this.state.searchTerm!==''&&<Icon name="x"/>} .

Fuse.js: Plug-in desconhecido “babel-plugin-add-module-exports”

Adicione babel-plugin-add-module-exports como uma dependência de desenvolvimento. Fusível.js #154.

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

Reconhecimento

enkidevs - Componente react.js simples para uma entrada de pesquisa, fornecendo uma função de filtro.