react native search filter

기본 검색 필터 반응

필터 기능을 갖춘 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 함수에 대한 호출 빈도를 줄입니다(ms 단위).
onSubmitEditing	function	() => {}	onPress의 키보드 검색 버튼에 대한 기능을 정의합니다.
inputFocus	boolean	false	필드가 포커스를 받는지 여부를 정의합니다.
returnKeyType	string	done	Return 키의 모양을 결정합니다. 다음 값은 여러 플랫폼에서 작동합니다: 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 개발 종속성으로 추가합니다. Fuse.js #154.

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

승인

enkidevs - 검색 입력을 위한 간단한 React.js 구성 요소로, 필터 기능을 제공합니다.