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	return キーがどのように表示されるかを決定します。次の値はプラットフォーム間で機能します: done 、 go 、 next 、 search 、 send

メソッド

filter([keys])

配列をフィルタリングするために使用できる関数を返します。キーにはstring 、 [string] 、またはnullを指定できます。

配列キーが配列の場合、項目のキーの少なくとも 1 つが検索語に一致すると、この関数は true を返します。

静的メソッド

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

配列をフィルタリングするために使用できる関数を返します。 searchTerm には正規表現または文字列を指定できます。キーにはstring 、 [string] 、またはnullを指定できます。

配列キーが配列の場合、項目のキーの少なくとも 1 つが検索語に一致すると、この関数は 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コンポーネント。