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组件，提供过滤功能。