react native search filter

Собственный поисковый фильтр React

Компонент поиска React Native с функцией фильтра.

Начиная

Установка

Использование npm :

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

Использование yarn :

$ yarn add react-native-search-filter

Пример использования

Полный пример доступен здесь.

 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 и конфигурация

Свойство	Тип	По умолчанию	Описание
caseSensitive	boolean	false	Определите, должен ли поиск быть чувствительным к регистру.
clearIcon	Node	null	Дополнительный значок очистки.
clearIconViewStyles	Style	{position:absolute',top: 18,right: 22}	Дополнительные стили для четкого отображения значков.
filterKeys	string или [string]		Будет использоваться методом фильтра, если ему не передан аргумент.
fuzzy	boolean	false	Определите, должен ли поиск быть нечетким.
inputViewStyles	Style		Необязательные стили для входного контейнера.
onChangeText	Function	Необходимый	Функция, вызываемая при изменении условия поиска (будет передана в качестве аргумента).
sortResults	boolean	false	Определите, должны ли результаты поиска сортироваться по релевантности (работает только при нечетком поиске).
throttle	number	200	Уменьшите частоту обращения к функции onChange (в мс).
onSubmitEditing	function	() => {}	Определяет функцию для кнопки поиска клавиатуры onPress.
inputFocus	boolean	false	Определяет, получает ли поле фокус.
returnKeyType	string	done	Определяет, как должен выглядеть ключ возврата. Следующие значения работают на разных платформах: done , go , next , search , send

Методы

filter([keys])

Возвращает функцию, которую можно использовать для фильтрации массива. ключи могут быть string , [string] или null .

Если ключи массива являются массивом, функция вернет true, если хотя бы один из ключей элемента соответствует искомому критерию.

Статические методы

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

Возвращает функцию, которую можно использовать для фильтрации массива. searchTerm может быть регулярным выражением или строкой. ключи могут быть string , [string] или null .

Если ключи массива являются массивом, функция вернет true, если хотя бы один из ключей элемента соответствует искомому критерию.

Известные проблемы

Скройте clearIcon , если поле поиска пусто.

Если у вас есть собственный пакет значков, подойдет короткий метод переключения для свойства: clearIcon={this.state.searchTerm!==''&&<Icon name="x"/>} .

Fuse.js: неизвестный плагин «babel-plugin-add-module-exports»

Добавьте babel-plugin-add-module-exports в качестве зависимости для разработчиков. Предохранитель.js #154.

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

Благодарность

enkidevs — простой компонент act.js для ввода поиска, предоставляющий функцию фильтра.