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 函數的呼叫頻率（以毫秒為單位）。
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作為開發依賴項。 Fuse.js #154。

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

致謝

enkidevs - 用於搜尋輸入的簡單react.js元件，提供過濾功能。